<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding:0;
margin:0;
}
.arrow1 {
/*position: relative;*/
margin: 50px auto;
width: 100px;
height: 100px;
border: 20px solid red;
border-left: none;
border-bottom: none;
transform: rotate(45deg);
}
/*.arrow2{
transform: translate(-60px,-9px);
position: absolute;
}*/
</style>
</head>
<body>
<div class="arrow1">
<!--<div class="arrow1 arrow2">
</div>-->
</div>
</body>
</html>
原文：http://www.cnblogs.com/qiancheng123/p/6346767.html