비직각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%;
}