乐码库:一个极速、放心、纯净的下载站! 更新: 资源发布
  • 您的位置:首页 > 技术文档 > CSS/HTML > 利用CSS3新特性创建透明边框三角
  • 收藏本页
      利用CSS3新特性创建透明边框三角
      发布时间:2016-09-01 11:35:19 关键词: CSS,透明,三角
      内容简介:本文分享一个利用CSS3制作三角形的示例,感兴趣的朋友可以参考一下。

    先来看一下效果,这在CSS3之前,完全是不可想象的,只有图片才能做的到,但在HTML5和CSS3大行其道的今天,实现这种效果,那都不是事啊。

    看一下实现的代码:

    <!DOCTYPE html>
    <html>
    <head>
    <style type='text/css'>
    
    /* 上三角 */
    .arrow-up {
     width: 0;
     height: 0;
     border-left: 20px solid transparent;
     border-right: 20px solid transparent;
     border-bottom: 20px solid green;
    }
    
    /* 下三角 */
    .arrow-down {
     width: 0;
     height: 0;
     border-left: 20px solid transparent;
     border-right: 20px solid transparent;
     border-top: 20px solid orange;
    }
    
    /* 右三角 */
    .arrow-right {
     width: 0;
     height: 0;
     border-top: 60px solid transparent;
     border-bottom: 60px solid transparent;
     border-left: 60px solid blue;
    }
    
    /* 左三角 */
    .arrow-left {
     width: 0;
     height: 0;
     border-top: 10px solid transparent;
     border-bottom: 10px solid transparent;
     border-right: 10px solid silver;
    }
    </style>
    </head>
    <body>
     <div class="arrow-up"></div>
     <div class="arrow-down"></div>
     <div class="arrow-left"></div>
     <div class="arrow-right"></div>
    </body>
    </html>

     

      最新更新
      热门排行榜