css正三角倒三角

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #redOne {
            width: 0;
            height: 0;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 20px solid red;
        }

        #greenOne {
            width: 0;
            height: 0;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-top: 20px solid green;
        }

    </style>
</head>
<body>
    <div id="redOne"></div>
    <div id="greenOne"></div>

</body>
</html>

　　https://segmentfault.com/a/1190000002454383

posted on 2018-01-08 17:47 王洪洪阅读(1354) 评论(0) 编辑收藏举报