整理了下箭头的制作方法，直接拿来用吧。
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="demo1"></div>
<br />
<div class="demo2"></div>
<br />
<div class="demo3"></div>
<br />
<div class="demo4"></div>
<br />
<div class="demo5"></div>
<br />
<div class="demo6"></div>
</body>
<style type="text/css">
.demo1 {
border: 20px solid;
border-color: green blue orange red; /* 上右下左 */
width: 20px;
height: 20px;
}
.demo2 {
border: 20px solid;
border-color: green blue orange red;
width: 0px;
height: 0px;
}
.demo3 {
border: 20px solid;
border-color: green transparent transparent transparent;
width: 0px;
height: 0px;
}
.demo4 {
border: 20px solid;
border-color: green transparent transparent transparent;
border-left:transparent;
width: 0px;
height: 0px;
}
.demo5 {
border: 20px solid;
border-color: green transparent green green;
width: 0px;
height: 0px;
}
.demo6 {
width: 50px;
height: 50px;
background-color: green;
position: relative;
}
.demo6:after, .demo:before {
border: solid transparent;
content: ' ';
height: 0;
width: 0;
left: 100%;
position: absolute;
}
.demo6:after {
border-width: 9px;
border-left-color: green;
top: 15px;
}
.demo6:before {
border-width: 14px;
border-left-color: red;
top: 10px;
}
</style>
</html>
预见未来的最好方式就是去创造未来！
