CSS实现三角形 （伪类选择器）

使用css实现常用的三角效果

项目中三角：

复制代码
.breadcrumb{
        height: 40px;
        line-height: 40px;
        padding: 0 20px;
        border-top: 1px solid #f9c700;
        .breadcrumb-title{
            text-align: center;
            font-size: @fontC;
            //通过定义一个伪类after
            &:after{
                position: absolute;
                content: '';
                left: 89px;
                top: 39px;
                border-top: 9px solid @colorM;
                //border-left和border-right换成透明色 才能形成三角形 不然是长方形
                border-left: 12px solid transparent;
                border-right: 12px solid transparent;
                //background-color: red;
            }
        }
复制代码

详细讲解

实现三角形的方式很多种。比较简单又比较常用的是利用伪类选择器，在网页上也有很多用到这种效果，比如tips信息提示框。下面是自己写的实心三角形，原理其实很简单，代码都能看懂。

复制代码
<!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的差值绝对了三角形线的粗细而达到如图的效果。

 

posted @   喆星高照  阅读(594)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛