css写小三角
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.dot {
width:0;
height: 0;
border-width: 10px;
border-style: solid;
border-top-color: red;
border-bottom-color: pink;
border-left-color: blue;
border-right-color: yellow;
}
.top{
border-left-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
}
.left{
border-right-color: transparent;
border-top-color: transparent;
border-bottom-color: transparent;
}
.right{
border-left-color: transparent;
border-top-color: transparent;
border-bottom-color: transparent;
}
.bottom{
border-left-color: transparent;
border-right-color: transparent;
border-top-color: transparent;
}
</style>
</head>
<body>
<div class="dot top"></div>
<div class="dot bottom"></div>
<div class="dot left"></div>
<div class="dot right"></div>
</body>
</html>