css把长方形的分成两个直角梯形

最新推荐文章于 2024-03-08 06:23:55 发布

某赵疯子

最新推荐文章于 2024-03-08 06:23:55 发布

阅读量454

点赞数 9

文章标签： css 前端 vue.js

本文链接：https://blog.csdn.net/weixin_50695881/article/details/136457251

版权

根据需求需要完成一个页面，完成代码：

<div class="image-box">
                <div class="box1">
                    <el-image style="width:100%;height:100%;" :src="url" fit="cover"></el-image>
                </div>
                <div class="box2">
                    <el-image style="width:100%;height:100%;" :src="url" fit="cover"></el-image>
                </div>
            </div>

.image-box {
    width:100%;
    height: 820px;
    position: relative;
}
.box1 {
    width: 58%;
    height: 820px;
    background-color: lightblue;
    clip-path: polygon(30% 100%, 100% 100%, 100% 0, 0% 0);
    position: absolute;
    top: 0;
    right: 0;
}
.box2 {
    width: 58%;
    height:  820px;
    background-color: lightgreen;
    clip-path: polygon(0 100%, 100% 100%, 70% 0, 0% 0);
    position: absolute;
    top: 0px;
    left: 0px;
}

完成效果