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%;
}