利用CSS伪元素选择器实现三角形

最新推荐文章于 2024-07-11 21:11:19 发布

h_yelin

最新推荐文章于 2024-07-11 21:11:19 发布

阅读量960

点赞数 2

分类专栏： css 文章标签： css

原文链接：https://blog.csdn.net/qq_41846861/article/details/87943280

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

实现三角形的方式很多种。比较简单又比较常用的是利用伪元素选择器。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
           .tri_top, .tri_right, .tri_bottom, .tri_left{
               width: 150px;
               height: 100px;
               background: #CCCCCC;
               border-radius: 8px;
               margin: 50px 50px;
               position: relative;
               float: left;
           }
           .tri_top:before{
               content: "";
               width: 0px;
               height: 0px;
               border-left: 10px solid transparent;
               border-right: 10px solid transparent;
               border-bottom: 10px solid #CCCCCC;
               position: absolute;
               top: -10px;
               left: 65px;
           }
           .tri_right:before{
               content: "";
               width: 0px;
               height: 0px;
               border-top: 10px solid transparent;
               border-bottom: 10px solid transparent;
               border-left: 10px solid #CCCCCC;
               position: absolute;
               top: 40px;
               left: 150px;
           }
           .tri_bottom:before{
               content: "";
               width: 0px;
               height: 0px;
               border-top: 10px solid #CCCCCC;
               border-left: 10px solid transparent;
               border-right: 10px solid transparent;
               position: absolute;
               top: 100px;
               left: 70px;
           }
           .tri_left:before{
               content: "";
               width: 0px;
               height: 0px;
               border-top: 10px solid transparent;
               border-bottom: 10px solid transparent;
               border-right: 10px solid #CCCCCC;
               position: absolute;
               top: 40px;
               left: -10px;
           }
       </style>
   </head>
   <body>
       <div class="tri_top"></div>         <!--三角形在上边-->
       <div class="tri_right"></div>       <!--三角形在右边-->
       <div class="tri_bottom"></div>      <!--三角形在底边-->
       <div class="tri_left"></div>        <!--三角形在左边-->
   </body>
</html>

效果图：
在这里插入图片描述

空心三角形代码跟实心三角形的代码都是差不多，如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .tri_top, .tri_right, .tri_bottom, .tri_left{
                width: 150px;
                height: 100px;
                border: 1px solid #000000;
                border-radius: 8px;
                margin: 50px 50px;
                position: relative;
                float: left;
            }
            .tri_top:before{
                content: "";
                width: 0px;
                height: 0px;
                border-left: 15px solid transparent;
                border-right: 15px solid transparent;
                border-bottom: 15px solid #000000;
                position: absolute;
                top: -15px;
                left: 65px;
            }
            .tri_top:after{
                content: "";
                width: 0px;
                height: 0px;
                border-left: 14px solid transparent;
                border-right: 14px solid transparent;
                border-bottom: 14px solid #FFFFFF;
                position: absolute;
                top: -14px;
                left: 66px;
            }
            .tri_right:before{
                content: "";
                width: 0px;
                height: 0px;
                border-top: 15px solid transparent;
                border-bottom: 15px solid transparent;
                border-left: 15px solid #000000;
                position: absolute;
                top: 39px;
                left: 150px;
            }
            .tri_right:after{
                content: "";
                width: 0px;
                height: 0px;
                border-top: 14px solid transparent;
                border-bottom: 14px solid transparent;
                border-left: 14px solid #FFFFFF;
                position: absolute;
                top: 40px;
                left: 149px;
            }
            .tri_bottom:before{
                content: "";
                width: 0px;
                height: 0px;
                border-top: 15px solid #000000;
                border-left: 15px solid transparent;
                border-right: 15px solid transparent;
                position: absolute;
                top: 101px;
                left: 69px;
            }
            .tri_bottom:after{
                content: "";
                width: 0px;
                height: 0px;
                border-top: 14px solid #FFFFFF;
                border-left: 14px solid transparent;
                border-right: 14px solid transparent;
                position: absolute;
                top: 100px;
                left: 70px;
            }
            .tri_left:before{
                content: "";
                width: 0px;
                height: 0px;
                border-top: 15px solid transparent;
                border-bottom: 15px solid transparent;
                border-right: 15px solid #000000;
                position: absolute;
                top: 40px;
                left: -15px;
            }
            .tri_left:after{
                content: "";
                width: 0px;
                height: 0px;
                border-top: 14px solid transparent;
                border-bottom: 14px solid transparent;
                border-right: 14px solid #FFFFFF;
                position: absolute;
                top: 41px;
                left: -14px;
            }
        </style>
    </head>
    <body>
        <div class="tri_top"></div>         <!--三角形在上边-->
        <div class="tri_right"></div>       <!--三角形在右边-->
        <div class="tri_bottom"></div>      <!--三角形在底边-->
        <div class="tri_left"></div>        <!--三角形在左边-->
    </body>
</html>

效果图：
在这里插入图片描述

总结出了一个道理：三角形往哪个方向，那个方向无需设置border，而相反方向设置border颜色，相邻两边的border设为透明。这样就可实现各个方向的三角形。实心三角形利用CSS中的伪元素· ：before实现，再利用border的transparent属性即可达到效果。而空心三角形是在空心三角形的基础上再加上伪元素：after实现。伪元素：before实现的是一个实心的三角形，伪元素：after实现的是空心的三角形，进而把实心的三角形覆盖，利用绝对定位的top与left的差值绝对了三角形线的粗细而达到如图的效果。
————————————————
版权声明：本文为CSDN博主「Dream_Lee_1997」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_41846861/article/details/87943280