CSS绘制小三角 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>list</title>
</head>
<style>
    
    .top{
        width:0;
        height:0;
        border-width:0 30px 30px;
        border-style:solid;
        border-color:transparent transparent #333;/*透明 透明  灰*/
        margin:40px auto;
        position:relative;
    }
    .down{
         width:0;
        height:0;
        border-width:30px 30px 0;
        border-style:solid;
        border-color:#333 transparent transparent;/*灰 透明 透明 */
        margin:40px auto;
        position:relative;
    }
    .left{
        width:0;
        height:0;
        border-width:30px 30px 30px 0;
        border-style:solid;
        border-color:transparent #333 transparent transparent;/*透明 灰 透明 透明 */
        margin:40px auto;
        position:relative;
    }
    .right{
         width:0;
        height:0;
        border-width:30px 0 30px 30px;
        border-style:solid;
        border-color:transparent transparent transparent #333;/*透明 透明 透明 灰*/
        margin:40px auto;
        position:relative;
    }
</style>
<body>
    <div class="">
        
        <div class="top">
            
        </div>
        <div class="down">
            
        </div>
        <div class="left">
            
        </div>
        <div class="right">
            
        </div>
    </div>
</body>
</html>

 

posted @ 2019-05-28 14:52  caribean  阅读(688)  评论(0)    收藏  举报