Skip to main content
 首页 » 学习笔记 » html5/css3

css边框与小三角

2016年07月15日1819

CSS边框的组装类似门框的45°一样,而不是想象中的垂直门框。当元素为0x0大小的时候,边框看上去就是4个小三角组合在一起。

这样的话,我们只需要设置某个边框存在就是一个等腰三角了,别的三角相关的都可以按这个规则去设置。

1.jpg

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>css实现小三角</title>
    <link rel="stylesheet" href="">
    <style>
        div{
            margin-top:40px;
            float:left;
            margin-left:40px;
        }
        .d1{
            width:0px;
            height:0px;
            border-top:55px solid #AACCDD;
            border-bottom:55px solid #CCDDAA;
            border-left:55px solid #CCAADD;
            border-right:55px solid #FFAADD;
        }
        .d2{
            width:10px;
            height:10px;
            border-top:50px solid #AACCDD;
            border-bottom:50px solid #CCDDAA;
            border-left:50px solid #CCAADD;
            border-right:50px solid #FFAADD;
        }        
        .d3{
            width:25px;
            height:25px;
            border-top:40px solid #AACCDD;
            border-bottom:40px solid #CCDDAA;
            border-left:40px solid #CCAADD;
            border-right:40px solid #FFAADD;
        }
        .d4{
            width:40px;
            height:40px;
            border-top:35px solid #AACCDD;
            border-bottom:35px solid #CCDDAA;
            border-left:35px solid #CCAADD;
            border-right:35px solid #FFAADD;
        }
        .d5{
            width:60px;
            height:60px;
            border-top:25px solid #AACCDD;
            border-bottom:25px solid #CCDDAA;
            border-left:25px solid #CCAADD;
            border-right:25px solid #FFAADD;
        }
        .d6{
            width:100px;
            height:100px;
            border-top:5px solid #AACCDD;
            border-bottom:5px solid #CCDDAA;
            border-left:5px solid #CCAADD;
            border-right:5px solid #FFAADD;
        }
        .d7{
            width:30px;
            height:30px;
            border-top:35px solid #AACCDD;
            border-bottom:35px solid #CCDDAA;
            border-left:35px solid #CCAADD;
        }
    </style>
</head>
<body>
    <div class='d1'></div>
    <div class='d2'></div>
    <div class='d3'></div>
    <div class='d4'></div>
    <div class='d5'></div>
    <div class='d6'></div>
    <div class='d7'></div>
</body>
</html>

2.jpg

微信