这种图片效果,用css怎么实现???

仙乐无道
  • 80

image

这种图片效果,用css怎么实现???

回复
阅读 372
2 个回答
✓ 已被采纳

可以设置 渐变背景background: linear-gradient(120deg, yellow 40%, orange 40%)

另一种思路是通过画个三角形来实现,当然比楼上要复杂好多

<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>

效果

image.png

原理:左右两个盒子,右边盒子里套个跟左边盒子颜色相同的直角三角形,即红钱区域放个三角形

image.png

你知道吗?

宣传栏