使用CSS绘制几何图形（圆形、三角形、扇形、菱形等

在实际开发中，会出现一些小三角，用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>

代码007普通

打赏 收藏 海报 链接