项目中要使用小箭头时我们一般引入字体图标，但其实css3也可以画出一个小箭头主要利用了tranform的rotate
我们的小箭头的原型是一个正方形，我们只保留正方形底部和右边区域在使其旋转45度即可
代码语言：javascript复制<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
div{
width: 300px;
height: 50px;
border:1px solid black;
position: relative;
}
div::after{
content:'';
width:10px;
height:10px;
border-bottom: 1px solid red;
border-right:1px solid red;
position: absolute;
right:0;
top:10px;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div id="">
</div>
</body>
</html>效果如下
