gpt4 book ai didi

javascript - 用于连接 2 个 div 的边框或虚线

转载 作者:太空宇宙 更新时间:2023-11-04 16:12:04 26 4
gpt4 key购买 nike

我在用虚线连接 2 个 div 时遇到问题,我试图用 ::after::before 来做到这一点,但没有成功。您可以在以下位置查看我的结构:

JS fiddle code

以及我想要实现的目标的图像:

enter image description here

这可能吗?如果是,那么我应该在我的代码中添加或更改什么?

谢谢。

最好的问候,

最佳答案

使用 :before/:after 和 border-radius 你可以实现这个(严格使用 css)。我在下面包括了一个例子。

https://jsfiddle.net/m3zoz34f/8/

.box-top-right{
position: relative;
}
.box-top-right:after{
content: ' ';
border-bottom-right-radius: 175px;
width: 106%;
position: absolute;
border-bottom: 2px solid red;
right: 0;
bottom: -175px;
height: 185px;
border-bottom-style: dashed
}

.box-bottom:before{
content: ' ';
width: 66%;
border-top: 2px solid red;
height: 135px;
position: absolute;
top: -125px;
border-top-left-radius: 150px;
border-top-style: dashed;
}

.box-top, .box-bottom{
position:relative;
width:100%;
min-height:400px;
}

.box-top-left, .box-top-right, .box-bt-left, .box-bt-right{
float:left;
}

.box-top-left, .box-bt-right{
width:65%;
background-color:red;
color:white;
min-height:190px;
text-align:center;
padding-top:10px;
}

.box-top-right, .box-bt-left{
width:30%;
border:2px solid black;
margin-left:2%;
min-height:90px;
text-align:center;
padding-top:10px;
}

.box-bt-left{
margin-left:0;
margin-right:2%;
}

.box-bt-right{
background-color:gray;
}
<div class="box-top">
<div class="box-top-left">
This is top left box
</div>
<div class="box-top-right">
This is top right box
</div>
</div>
<div class="box-bottom">
<div class="box-bt-left">
This is bottom left box
</div>
<div class="box-bt-right">
This is bottom right box
</div>
</div>

关于javascript - 用于连接 2 个 div 的边框或虚线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34443667/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com