css显示出三角形

最新推荐文章于 2024-01-10 00:32:35 发布

weixin_30610755

最新推荐文章于 2024-01-10 00:32:35 发布

阅读量58

点赞数

原文链接：http://www.cnblogs.com/biyongyao/p/5842855.html

版权

其实非常简单，就是设置一个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>