css实现三角

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style type="text/css">
        /*箭头向上*/
        
        .arrow-up {
            width: 0;
            height: 0;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent;
            border-bottom: 30px solid #fea;
        }
        /*箭头向下*/
        
        .arrow-down {
            width: 0;
            height: 0;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            border-top: 20px solid #0066cc;
        }
        /*箭头向左*/
        
        .arrow-left {
            width: 0;
            height: 0;
            border-top: 30px solid transparent;
            border-bottom: 30px solid transparent;
            border-right: 30px solid yellow;
        }
        /*箭头向右*/
        
        .arrow-right {
            width: 0;
            height: 0;
            border-top: 50px solid transparent;
            border-bottom: 50px solid transparent;
            border-left: 50px solid green;
        }
    </style>
</head>

<body>
    <div class="arrow-up">
        <!--向上的三角-->
    </div>
    <div class="arrow-down">
        <!--向下的三角-->
    </div>
    <div class="arrow-left">
        <!--向左的三角-->
    </div>
    <div class="arrow-right">
        <!--向右的三角-->
    </div>
</body>
</html>
最后编辑于：2017.12.08 06:22:55
css实现三角

推荐阅读更多精彩内容
