<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
margin-bottom: 30px;
}
.arrow_top {
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-bottom-color: red;
border-width: 6px;
position: relative;
}
.arrow_top:after {
position: absolute;
content: '';
display: block;
top: -5px;
margin-left: -6px;
border-color: transparent;
border-style: solid;
border-bottom-color: white;
border-width: 6px;
}
.arrow__bottom {
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-top-color: red;
border-width: 6px;
position: relative;
}
.arrow__bottom:after {
position: absolute;
content: '';
display: block;
top: -7px;
margin-left: -6px;
border-color: transparent;
border-style: solid;
border-top-color: white;
border-width: 6px;
}
.arrow__right {
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-right-color: red;
border-width: 6px;
position: relative;
margin-left: -6px;
}
.arrow__right:after {
position: absolute;
content: '';
display: block;
top: -6px;
margin-left: -5px;
border-color: transparent;
border-style: solid;
border-right-color: white;
border-width: 6px;
}
.arrow__left {
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-left-color: red;
border-width: 6px;
position: relative;
}
.arrow__left:after {
position: absolute;
content: '';
display: block;
top: -6px;
margin-left: -7px;
border-color: transparent;
border-style: solid;
border-left-color: white;
border-width: 6px;
}
</style>
</head>
<body>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</body>
</html>
来源：https://zhuanlan.zhihu.com/p/144699306