非直角arrow(箭头) 的两种实现
1) rotate + skew
?
原理：箭头的两边就是一个透明div的border，通过skew扭转成需要的角度，再通过rotate把箭头摆正。
?
<div id="arrow"><span></span></div>
?
?
#arrow{-webkit-transform: rotate(-51deg);width: 35px;height: 35px;}#arrow span{display: block;-webkit-transform: skew(-15deg);width: 20px;height: 20px;background: transparent;border: solid 4px black;border-left: 0;border-top: 0;}??
2) :before + :after + rotate
原理：由:before与:after各生产一条边，通过rotate旋转出需要的角度，关键是旋转点(-webkit-transform-origin)。
?
<div id="arrow_2"></div>
?
?
#arrow_2{position: relative;}#arrow_2::before, #arrow_2::after{position: absolute;content: "";width: 10px;height: 80px;background: #f66;}#arrow_2::before{left: 0;-webkit-transform: rotate(-35deg);-webkit-transform-origin: 100% 100%;}#arrow_2::after{left: 10px;-webkit-transform: rotate(-145deg);-webkit-transform-origin: 0 100%;}