Question

我用CSS多边形函数创建了2个Divs，将其作为2个三角形，并一起构建了一个div。两个三角形内部都有它们自己的div。调整屏幕大小时，我希望第一个上div溢出第二个三角形。

<div class="boxes">
<div class="box box1">
    <div class="info left">gute Entscheidung</div>
</div>
<div class="box box2">
    <div class="info right">schlechte Entscheidung</div>
</div>
</div>

我创建了一个小提琴https://jsfiddle.net/46vcbw2x/5/，其中绿色div应该在黄色三角形上方。

谢谢

Answer 1

如果您考虑使用背景而不是clip-path，则可以简化操作，因为clip-path会将所有内容剪裁到内部，而您无法将绿色div剪裁在外面：

.boxes {
  width: 60%;
  margin: 0px auto;
  padding: 20px;
  background:linear-gradient(to bottom right,blue 49%,yellow 50%);
}

.info {
  text-align: center;
  padding: 10px;
}

.left {
  display:inline-block;
  background: green;
}

.right {
  float: right;
  background: red;
}

<div class="boxes">
  <div class="info left">gute Entscheidung</div>
  <div class="info right">schlechte Entscheidung</div>
</div>

2个多边形中的CSS 2 DIV溢出

1 个答案: