javascript - isometric shape 图片
问题描述
我面前有一个看起来像这样的设计,
如您所见,有一个蓝色方块(右半部分将隐藏在屏幕外)与网页的三个不同部分重叠,我不知道如何处理它。
我能做的只有两个选择,
1) 将紫色方块的一部分添加到3个部分的每个部分中,使其合并在一起,但每个部分的内容灵活,因此排队的变化很小。
2)添加一个绝对定位的 div 并将其放置在我需要的位置,并将正方形作为背景图像,然后使用 z-indexing?
我缺少一个简单的解决方案吗?
解决方案
你可以试试这样的
.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>
推荐阅读
- eclipse - 无法加载 p2 存储库
- html - 在 SWIFTUI 中显示 HTML 文本时检测到 AttributeGraph
- javascript - 有没有办法防止来自机器人的点击输入?
- postman - Postman + NTLM 身份验证 + 声明授权 + ASP.NET Core API = 403 Forbidden
- elasticsearch - ECK Filebeat Daemonset 转发到远程集群
- flutter - 如何创建这种类型的底部导航?
- javascript - 如何在返回的 pipe(map(...)) 语句中定义对象类型?
- python - Pyside6 在 QSqlRelationalTableModel 中插入一行
- flutter - 如何让 Flutter 应用使用某个网络证书?
- docker - 如何将'-search.maxUniqueTimeseriesi'标志传递给victoriametrics?