思路就是确定两个边框然后旋转45度即可 其他的角度控制角度或者边框即可实现
样式:
.jiantou{
margin: 0 auto; /*这个是为了显示效果写的,用的时候可以删除了*/
width: 15px;
height: 15px;
border-top: 5px solid red ;/*rgb(246,246,246);*/
border-right: 5px solid red;
transform: rotate(-45deg);
}
标签:
<div class="jiantou"></div>
效果如下:
伪类的使用:
<style>
.box{
background-color: red;
width: 50px;
height: 50px;
margin: 0 auto;
position: relative;
}
.box::before{
position: absolute;
content: "";
left: calc(50% - 10px);
top: 60px;
width: 20px;
height: 20px;
background-color: #fff;
border-top: 5px solid #e5e5e5;
border-right: 5px solid #e5e5e5;
transform: rotate(-45deg);
}
</style>
<body>
<div class="box">
</div>
</body>