c 网站开发例子,泉州公司网站建设,wordpress分类文章置顶,摄影网站的市场可行性2024.3.8今天我学习了如何用css实现直角梯形的效果#xff0c;
效果#xff1a; 具体实现原理#xff1a;
一、需要三个div#xff1a;
外面一个大的div#xff0c;里面左右两个小的div 我们需要先把第一个div变成直角梯形#xff1a; 大概是这样#xff0c;设置好之…2024.3.8今天我学习了如何用css实现直角梯形的效果
效果 具体实现原理
一、需要三个div
外面一个大的div里面左右两个小的div 我们需要先把第一个div变成直角梯形 大概是这样设置好之后如果你想要把第二个div也设置成直角梯形会变成
‘
多出一个菱形因为div的样式本身就不能超出它自己的范围所以要进行第二步
二、给外面div增加背景色
不对里面的右边小div做处理给外面div设置里面右边小div需要的背景颜色然后里面左边的小div使用z-index:1覆盖在上面这样就能实现左右都是直角梯形的效果。 代码如下
templatediv classoutside_stylediv classinside_left_style/divdiv classinside_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
