css显示出三角形

其实非常简单，就是设置一个div

让div的宽度和高度都设置为0，

然后为div设置一个border

因为角部位，比如我设置border-left和border-top

角部分是各自占用一半，

所以当我宽度和高度都为0时，不就是一个三角形吗。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<style type="text/css">
    #s1{
        margin:50px auto;
        height:200px;
        width:200px;
        border-left:40px mediumpurple solid;
        border-right:40px coral solid;
        border-top:40px lightblue solid;
        border-bottom:40px lightgreen solid;
    }
    #s2{
        margin:50px auto;
        height:0px;
        width:0px;
        border-left:40px mediumpurple solid;
        border-right:40px coral solid;
        border-top:40px lightblue solid;
        border-bottom:40px lightgreen solid;
    }
    #s3{
        
        margin:20px auto;
        height:0;
        width:0;
        border-left:100px mediumpurple solid;
        border-right:100px transparent solid;
        border-top:100px transparent  solid;
        border-bottom:100px transparent  solid;
        cursor:pointer;
    }
</style>
</head>
<body>
<div id="s1">
<div id="s2"></div>
</div>
<div id="s3"></div>
    
</body>
</html>

 

代码很简单，不解释了，

效果图是這样的

 

posted @ 2016-09-05 16:55  MrPat  阅读(307)  评论(0)  编辑  收藏  举报