如何利用CSS伪类选择器实现三角形

2,626 阅读1分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第2天,点击查看活动详情

三角形的实现有很多种方法。个人认为比较简单且比较常用的是利用伪类选择器,在网页上也有很多用到这种效果,比如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>

image.png

看了上面的例子,相信大家已经对这个原理已经了解了,那么下面的效果该如何实现呢,大家可以尝试着去写一下,原理同上。

image.png

那么实心三角形实现了,空心三角形该怎样实现呢?看看以下代码,你会发现其实代码跟实心三角形的代码都是差不多。

<!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>

image.png

通过以上的对比。相信大家也能看出其中的原理。总结出了一个道理:三角形往哪个方向,那个方向无需设置border,而相反方向设置border颜色,相邻两边的border设为透明。 这样就可实现各个方向的三角形。实心三角形利用CSS中的伪元素(:before)实现,再利用border的transparent属性即可达到效果。而空心三角形是在空心三角形的基础上再加上伪元素(:after)实现。伪元素(:before)实现的是一个实心的三角形,伪元素(:after)实现的是空心的三角形,进而把实心的三角形覆盖,利用绝对定位的top与left的差值绝对了三角形线的粗细而达到如图的效果。