isometric shape 图片

Question

我面前有一个看起来像这样的设计，

如您所见，有一个蓝色方块（右半部分将隐藏在屏幕外）与网页的三个不同部分重叠，我不知道如何处理它。

我能做的只有两个选择，

1) 将紫色方块的一部分添加到3个部分的每个部分中，使其合并在一起，但每个部分的内容灵活，因此排队的变化很小。

2）添加一个绝对定位的 div 并将其放置在我需要的位置，并将正方形作为背景图像，然后使用 z-indexing？

我缺少一个简单的解决方案吗？

Answer 1

你可以试试这样的.parent {&nbsp; display: flex;&nbsp; flex-direction: column}.card {&nbsp; disaply: flex;&nbsp; background: darkblue;&nbsp; height: 200px;&nbsp; width: 350px;}.card2 {&nbsp; disaply: flex;&nbsp; background: skyblue;&nbsp; height: 200px;&nbsp; width: 350px;}* {&nbsp; margin: 0;&nbsp; padding: 10px;}.diamond {&nbsp; height: 150px;&nbsp; width: 150px;&nbsp; background-color: purple;&nbsp; transform: rotate(45deg);&nbsp; z-index: 1000;&nbsp; margin-left:274px;&nbsp; top: 0;&nbsp; background: linear-gradient(to left bottom, #ff66ff 50%, #ffe6ff 50%);}&nbsp;<div class="parent"><div class="card">&nbsp; <h1>Item1</h1>&nbsp; <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vero suscipit quisquam, dolor laboriosam fugiat explicabo ipsam dolores.</p><div class="diamond"></div></div><div class="card2"><h1>Item1</h1>&nbsp; <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vero suscipit quisquam, dolor laboriosam fugiat explicabo ipsam dolores.</p>&nbsp;&nbsp;</div></div>https://codepen.io/tonytomk/pen/ExPNWjz