css正三角倒三角

时间：2021-08-17 19:52:04

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

相关文章