Css三角

最新推荐文章于 2024-07-28 15:07:19 发布

黄丫丫07

最新推荐文章于 2024-07-28 15:07:19 发布

阅读量101

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/m0_51495354/article/details/127937422

版权

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

    <title>css三角制作</title>

    <style>

        .box1 {

            width: 0;

            height: 0;

            border-top: 10px solid pink;

            border-right: 10px solid skyblue;

            border-bottom: 10px solid greenyellow;

            border-left: 10px solid #000;

        }



        .box2 {

            width: 0;

            height: 0;

            border: 20px solid transparent;

            border-top-color: pink;

            margin: 100px auto;

        }

    </style>

</head>



<body>

    <div class="box1"></div>

    <div class="box2"></div>

</body>



</html>

三角做法：

.box2 {

            /* 照顾低版本的兼容性问题 */

            line-height: 0;

            font-size: 0;



            width: 0;

            height: 0;

            border: 20px solid transparent;

            border-top-color: pink;

            margin: 100px auto;

        }

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

    <title>css三角制作</title>

    <style>

        .box1 {

            width: 0;

            height: 0;

            border-top: 10px solid pink;

            border-right: 10px solid skyblue;

            border-bottom: 10px solid greenyellow;

            border-left: 10px solid #000;

        }



        .box2 {

            /* 照顾低版本的兼容性问题 */

            line-height: 0;

            font-size: 0;



            width: 0;

            height: 0;

            border: 20px solid transparent;

            border-top-color: pink;

            margin: 100px auto;

        }



        .jd {

            margin-right: 10px;

            float: left;

            position: relative;

            width: 120px;

            height: 249px;

            background-color: pink;

        }



        .jd span {

            position: absolute;

            width: 0;

            height: 0;

            line-height: 0;

            font-size: 0;

            border: 5px solid transparent;

            border-bottom: 5px solid pink;

            right: 15px;

            top: -10px;

        }



        .xm {

            float: left;

            position: relative;

            width: 120px;

            height: 249px;

            background-color: skyblue;

        }



        .xm span {

            position: absolute;

            width: 0;

            height: 0;

            line-height: 0;

            font-size: 0;

            border: 5px solid transparent;

            border-left: 5px solid skyblue;

            top: 30px;

            right: -10px;

        }

    </style>

</head>



<body>

    <div class="box1"></div>

    <div class="box2"></div>

    <div class="jd">

        <span></span>

    </div>

    <div class="xm">

        <span></span>

    </div>

</body>



</html>