,可以通过以下方法实现:
<style>
.skewed-div {
display: inline-block;
transform: skew(-20deg);
margin-bottom: -10px; /* 调整间距 */
}
</style>
<div class="skewed-div">倾斜的div1</div>
<div class="skewed-div">倾斜的div2</div>
<style>
.skewed-div {
display: inline-block;
transform: skew(-20deg);
position: relative;
margin-bottom: -10px; /* 调整间距 */
}
.skewed-div::before {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 20px; /* 调整连接线的长度 */
background-color: black; /* 调整连接线的颜色 */
}
</style>
<div class="skewed-div">倾斜的div1</div>
<div class="skewed-div">倾斜的div2</div>
以上是两种常见的方法来确保两个倾斜的div始终垂直连接且没有间距。具体使用哪种方法取决于具体的需求和设计。
领取专属 10元无门槛券
手把手带您无忧上云