我眼前的设计看起来像这样
如您所见,有一个蓝色正方形(该右边的一半将隐藏在屏幕外),与一个页面的三个不同部分重叠,我没有办法解决。
我唯一的两个选择是
1)将紫色方块的一部分添加到3个部分的每个部分中,使其合并在一起,但是每个部分的内容都很灵活,因此排列的变化很小。
2)添加一个绝对定位的div,并将其放置在我需要的位置,并以正方形作为背景图像,然后使用z-indexing播放?
我是否缺少一个简单的解决方案?
答案 0 :(得分: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>