非直角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%;
}