CSS实现梯形

最新推荐文章于 2024-07-08 11:32:20 发布

TT_技术中心

最新推荐文章于 2024-07-08 11:32:20 发布

阅读量369

点赞数 1

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_40421206/article/details/134882167

版权

1、这是结构代码，实现两个体形盒子对称

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

2、这是CSS样式代码

        .container {
            width: 400px;
            height: 400px;
            border: 2px solid #000;
            margin: 50px auto;
            text-align: center;
            line-height: 400px;
            background: linear-gradient(to right, skyblue, white);
        }
        .container div {
            display: inline-block;
        }
        .container .box1 {
            width: 100px;
            height: 0;
            border-top: 80px solid pink;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
            border-right: 20px solid transparent;
            border-bottom: 0 solid deeppink;
            border-left: 0 solid skyblue;
        }
        .container .box2 {
            width: 100px;
            height: 0;
            border-top: 0 solid pink;
            border-right: 0 solid transparent;
            border-bottom: 80px solid deeppink;
            border-left: 20px solid transparent;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
        }

最终的运行结构是