大众计算机学习网

专门提供各种电脑教程

CSS3制作三角形

Admin | 2016-11-18 10:47:35 | 被阅次数 | 1678

  使用CSS3来制作三角形,首先看下图,如何实现呢


  实现原来,首先,弄一个DIV,然后把DIV的边框设置为上述的颜色。然后,在DIV里面,加一个<em></em>,设置其位置至DIV的下面,然后再设置其形状为三角形。

  下面看代码吧。

  ①HTML代码

  <div class="tag">
         <em></em>大众计算机学习网
     </div>

  ②CSS代码

  .tag
        {
            width: 200px;
            height: 50px;
            border: 2px solid #09F;
            position: relative;
            padding:10px;
        }
        .tag em
        {
            display: block;
            border-width: 20px;
            position: absolute;
            bottom: -40px;
            left: 100px;
            border-style: solid dashed dashed;
            border-color: #09F transparent transparent;
            font-size: 0;
            line-height: 0;
        }

  注意看上面的代码哦。

  知识拓展:在上述的基础上,我们还可以设置如下图的三角形效果。


  看看上面的效果,是不是有点炫酷了,其实,稍微动点脑子都能想出来。根据上述的效果,然后,再增加一个span对象,该对象的背景颜色是白色,位置刚好位于<em></em>上方一点,效果就出来了。下面看代码。

  <div class="tag">
          <em></em><span></span>大众计算机学习网
  </div>

  CSS代码如下。

  .tag
         {
            width: 200px;
            height: 50px;
            border: 2px solid #09F;
            position: relative;
            padding:10px;
         }
  .tag em
         {
            display: block;
            border-width: 20px;
            position: absolute;
            bottom: -40px;
            left: 100px;
            border-style: solid dashed dashed;
            border-color: #09F transparent transparent;
            font-size: 0;
            line-height: 0;
         }
  .tag span
         {
            display: block;
            border-width: 20px;
            position: absolute;
            bottom: -38px;
            left:100px;
            border-style: solid dashed dashed;
            border-color: #FFF transparent transparent;
            font-size: 0;
            line-height: 0;
         }