有一个这样的需求
左边是未选中状态，右边是选中状态，从左边到右边，纯css实现
html部分
<div class="select">500元</div>
1
css部分
.select {
position: relative;
width: 120px;
height: 36px;
text-align: center;
line-height: 36px;
color: rgb(24, 144, 255);
background-color: #fff;
box-shadow: 0px 2px 7px 0px rgba(85,110,97,0.35);
border-radius: 3px;
border: 1px solid rgb(24, 144, 255);;
}
.select:before {
content: '';
position: absolute;
right: 0;
bottom: 0;
border: 10px solid rgb(24, 144, 255);;
border-top-color: transparent;
border-left-color: transparent;
}
.select:after {
content: '';
width: 5px;
height: 12px;
position: absolute;
right: 3px;
bottom: 1px;
border: 2px solid #fff;
border-top-color: transparent;
border-left-color: transparent;
transform: rotate(45deg);
}
其实这个的主要的点就是使用伪类，做出两个小方形，然后在设置颜色，后面一个还加了旋转而已
————————————————
版权声明：本文为CSDN博主「今天2岁」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/jiangyue2694/article/details/109094828
