在实际开发中,会出现一些小三角,用icon又不方便,于是我使用css绘制,并进行记录
1、在使用伪类时,要加position: absolute;,当我没有加的时候,圆形会变成椭圆形
2、伪类中使用position: absolute;,则注意在使用伪类的div中加position: relative;
3、在三角形伪类中:可以适当修改border-radius: 2px;,让两边的角没那么锐利,但是向内的角暂时没办法更改
4、三角形伪类主要是:通过改变border的颜色来实现
5、具体三角形伪类使用中,可以通过微调border的px值,查看三角形的状态
6、菱形伪类主要依靠旋转:transform: rotate(45deg);
.box {
margin: 20px;
}
.box div {
display: inline-block;
position: relative;
}
/* 圆形 */
.box11 {
width: 20px;
height: 20px;
background-color: #ccc;
border-radius: 50%;
}
.box1::after {
content: '';
width: 0;
height: 0;
position: absolute;
top: 50%;
margin-top: -10px;
right: -30px;
border-top: 10px solid #ccc;
border-left: 10px solid #ccc;
border-bottom: 10px solid #ccc;
border-right: 10px solid #ccc;
border-radius: 50%;
}
/* 三角形 */
.box2::after {
content: '';
width: 0;
height: 0;
position: absolute;
top: 50%;
margin-top: -5px;
right: -30px;
border-top: 12px solid #ccc;
border-left: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid transparent;
border-radius: 2px;
}
/* 扇形伪类 */
.box3::after {
content: '';
width: 0;
height: 0;
position: absolute;
top: 50%;
margin-top: -6px;
right: -40px;
border-top: 15px solid #ccc;
border-left: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right: 15px solid transparent;
border-radius: 50%;
}
/* 菱形伪类 */
.box4::after {
content: '';
width: 0;
height: 0;
position: absolute;
top: 50%;
margin-top: -10px;
right: -30px;
border-top: 10px solid #ccc;
border-left: 10px solid #ccc;
border-bottom: 10px solid #ccc;
border-right: 10px solid #ccc;
transform: rotate(45deg);
}
<div class="box">
<div class="box11"></div>
<br><br>
<div class="box1">圆形伪类</div>
<br><br>
<div class="box2">三角形伪类</div>
<br><br>
<div class="box3">扇形伪类</div>
<br><br>
<div class="box4">菱形伪类</div>
</div>