首页 前端知识 使用CSS绘制几何图形(圆形、三角形、扇形、菱形等

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

2024-03-11 10:03:13 前端知识 前端哥 534 497 我要收藏

在实际开发中,会出现一些小三角,用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>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/3600.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!