绘制三角形实例 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #sj{
                width: 0;
                border-top: 20px solid #fde;
                border-bottom: 20px solid #ffb;
                border-left: 20px solid #fba;
                border-right: 20px solid #bac;
            }
            .box{
                width: 200px;
                height: 200px;
                border-top: 5px solid #def;
                border-left: 5px solid #bac;
            }
        </style>
    </head>
    <body>
        <div id="sj">
            
        </div>
        <div class="box"></div>
    </body>
</html>

在三角形的透明上可以采用三种解决方案，

1.将背景颜色设置成和所对应的背景颜色相同

2.强css中的背景颜色采用rgba（）来设置

3.利用transparent属性值

posted @ 2016-07-01 09:09  apestack  阅读(186)  评论(0)  编辑  收藏  举报