我正在尝试实现如下图所示的形状:
让 2 个带切角的矩形 div 和 1 个 div 位于另一个 div 后面。
但是角落似乎不正确,我找不到显示形状边界的方法。
.wrapper {
display: flex;
justify-content: center;
}
.connect {
width: 254px;
height: 50px;
background: red;
background: #FF2D5069;
border-top: 2px solid #FF2175;
position: absolute;
bottom: 0;
z-index: 5;
}
.connect::before {
content: '';
position: absolute;
bottom: 0;
right: -2px;
border-top: 52px solid white;
border-left: 42px solid transparent;
}
.connect::after {
content: '';
position: absolute;
bottom: 0;
left: -2px;
border-top: 52px solid white;
border-right: 42px solid transparent;
}
.connect-behind {
width: 300px;
height: 44px;
background: red;
background: #FF2D5069;
border-top: 2px solid #FF2175;
position: absolute;
bottom: 0;
}
.connect-behind::before {
content: '';
position: absolute;
bottom: 0;
right: -2px;
border-top: 46px solid white;
border-left: 26px solid transparent;
}
.connect-behind::after {
content: '';
position: absolute;
bottom: 0;
left: -2px;
border-top: 46px solid white;
border-right: 26px solid transparent;
}
<div class="wrapper">
<div class="connect"></div>
<div class="connect-behind"></div>
</div>
我参考了其他线程来使用behind
和after
解决方案,但它似乎不适用于我的问题。请帮忙,谢谢。