isometric shape background 图片

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

isometric shape background 图片

isometric shape background images

html

javascript

css

background-image

vue.js