您的位置：首页 > Web前端 > CSS

css绘制透明三角形

2016-03-10 09:59 846 查看

css实现下图样式，具体像素值记不住了，很好设置，html code (2014百度秋招面试题)：

<div id="demo"></div>

分析：这个样式的关键就在三角形和三角形实现了之后的变成只有个边框的三角形。利用元素的：after和：before伪元素(请自动忽略低版本IE)。

思想：先实现个正方形，在实现个三角形层，放在右上角，然后再实现一个透明的三角形覆盖黑色三角形的内部，只留边框。

<!DOCTYPE html>   

    <html lang="zh">   

    <head>   

    <meta charset=utf-8>   

    <title>demo</title>   

    </head>   

       

    <style>   

    #demo{    

      width:100px;     

      height:100px;     

      border:2px solid #000;    

    }    

    #demo:before{    

      content:'';     

      display:block;     

      width:0;     

      height:0;     

      position:relative;     

      top:10px;     

      left:100px;     

      border-left:9px solid #000;     

      border-top:7px solid transparent;     

      border-bottom:7px solid transparent;    

    }    

    #demo:after{    

      content:'';     

      display:block;     

      width:0;     

      height:0;     

      position:relative;     

      top:-2px;     

      left:100px;     

      border-left:7px solid #fff;     

      border-top:5px solid transparent;     

      border-bottom:5px solid transparent;    

    }    

       

    </style>   

    <body>   

       <div id='demo'></div>   

        <script>   

       

        </script>   

    </body>      

    </html>

以上就是本文的全部内容，希望对大家的学习有所帮助。

原文：http://www.cnblogs.com/codinganytime/p/5193475.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css 三角形

相关文章推荐

新的分享

章节导航