六合开奖结果现场直播欢迎诸位!收藏本站注 册登 陆
常用三肖中特马:基础知识网络知识操作系统WPS网页制作数据库算法网页成功之路网络安全最新技术古典mid流行midmid背景下载中心
您现在的位置:首页 > 三肖中特马 > 文章页

CSS3制作三角形

Admin | 2016-11-18 10:47:35 | ReadNums | 1293 | 标签 网页制作 | 打印本页
     

  使用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;
         }


问题未解决:在线咨询

网友评论

(访客)
内容实用原创,讲得很好。
20xx年x月x日
(站长)
有问题请在线咨询。
20xx年x月x日