css clip-path polygon属性实现直角梯形

2024.3.8今天我学习了如何用css实现直角梯形的效果，

效果：

具体实现原理：

一、需要三个div：

外面一个大的div，里面左右两个小的div

我们需要先把第一个div变成直角梯形：

大概是这样，设置好之后，如果你想要把第二个div也设置成直角梯形会变成：

‘

多出一个菱形，因为div的样式本身就不能超出它自己的范围，所以要进行第二步：

二、给外面div增加背景色：

不对里面的右边小div做处理，给外面div设置里面右边小div需要的背景颜色，然后里面左边的小div使用z-index:1覆盖在上面，这样就能实现左右都是直角梯形的效果。

代码如下：

<template><div class="outside_style"><div class="inside_left_style"></div><div class="inside_right_style"></div></div></template>
<style>
/* 外面div样式*/
.outside_style{width:200px;height:200px;display:flex;background: 'white';
}/* 里面div样式*/
.inside_left_style{width: 70%;height: 100%;background: rgb(2, 17, 42);z-index: 1;//把div覆盖在上面clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 0% 100%);//设置多边形的属性
}.inside_right_style{width: 30%;height: 100%;
}
</style>