这种图片效果,用css怎么实现???
另一种思路是通过画个三角形来实现,当然比楼上要复杂好多
<style>
.container {
display: flex;
}
.left {
width: 300px;
height: 200px;
background-color: antiquewhite;
}
.right {
width: 500px;
height: 200px;
background-color: aqua;
}
.child {
width: 200px;
height: 200px;
box-sizing: border-box;
border-width: 0 0 200px 100px; // 最后一个数字可以调斜边的斜率
border-style: solid;
border-color: transparent antiquewhite;
}
</style>
<div class="container">
<div class="left"></div>
<div class="right">
<div class="child"></div>
</div>
</div>
效果
原理:左右两个盒子,右边盒子里套个跟左边盒子颜色相同的直角三角形,即红钱区域放个三角形
可以设置
渐变背景
:background: linear-gradient(120deg, yellow 40%, orange 40%)