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

仙乐无道
  • 80

image

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

回复
阅读 371
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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏