isometric shape 图片

Question

我面前有一个看起来像这样的设计，如您所见，有一个蓝色方块（右半部分将隐藏在屏幕外）与网页的三个不同部分重叠，我不知道如何处理它。我能做的只有两个选择，1) 将紫色方块的一部分添加到3个部分的每个部分中，使其合并在一起，但每个部分的内容灵活，因此排队的变化很小。2）添加一个绝对定位的 div 并将其放置在我需要的位置，并将正方形作为背景图像，然后使用 z-indexing？我缺少一个简单的解决方案吗？

Answer 1

你可以试试这样的

.parent {

  display: flex;

  flex-direction: column

}

.card {

  disaply: flex;

  background: darkblue;

  height: 200px;

  width: 350px;

}

.card2 {

  disaply: flex;

  background: skyblue;

  height: 200px;

  width: 350px;

}

* {

  margin: 0;

  padding: 10px;

}

.diamond {

  height: 150px;

  width: 150px;

  background-color: purple;

  transform: rotate(45deg);

  z-index: 1000;

  margin-left:274px;

  top: 0;

  background: linear-gradient(to left bottom, #ff66ff 50%, #ffe6ff 50%);

} 

<div class="parent">

<div class="card">

  <h1>Item1</h1>

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

  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vero suscipit quisquam, dolor laboriosam fugiat explicabo ipsam dolores.</p>  

</div>

</div>

https://codepen.io/tonytomk/pen/ExPNWjz