css三角做法

"三角的做法

  1:设置一个盒子,宽和高都设置成0

  2:四条边加上边框,例如做一个向下的三角,那么其余三边背景颜色设置成透明,然后单独给border-top-color设置颜色


代码:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .a01{

            width: 0;

            height: 0;

            border-top: 50px solid pink;

            border-left:50px solid powderblue;

            border-right:50px solid springgreen;

            border-bottom:  50px solid rgb(236, 135, 62);

        }

        .a02 {

            width: 0;

            height: 0;

            border:50px solid transparent;

            border-top-color: teal;

            margin-top: 50px;

        }

    </style>

</head>

<body>

    <div class="a01"></div>

    <div class="a02"></div>

</body>

</html>



©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容