英文:
How to draw broken line wit CSS between two divs
问题
有没有一种方法可以在两个div之间用CSS绘制断裂线？就像图片中的白线一样。
英文:
Is there a way to draw with CSS broken line between two divs? Like in picture white line.
答案1
得分: 1
在两个方框之间添加一个中心的 div。
添加 ::before 和 ::after 伪元素以创建锯齿线。
根据需要调整尺寸。
.top-box,
.bottom-box {
width: 300px;
height: 150px;
background-color: green;
position: relative;
}
.top-box {
margin-left: 200px;
margin-bottom: 100px;
}
.bottom-box {
margin-top: 100px;
}
.zig-line {
width: 200px;
height: 3px;
margin-left: 150px;
background-color: red;
position: relative;
}
.zig-line::after,
.zig-line::before {
content: "";
position: absolute;
width: 3px;
height: 100px;
background-color: red;
}
.zig-line::before {
left: 0;
}
.zig-line::after {
right: 0;
bottom: 0;
}
<div class="top-box" style="background-color: blue;"></div>
<div class="zig-line"></div>
<div class="bottom-box"></div>
英文:
Add center div between to two box.
Add ::before and ::after pseudo element to make zig line.
Adjust size according to your need.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.top-box,
.bottom-box {
width: 300px;
height: 150px;
background-color: green;
position: relative;
}
.top-box {
margin-left: 200px;
margin-bottom: 100px;
}
.bottom-box {
margin-top: 100px;
}
.zig-line {
width: 200px;
height: 3px;
margin-left: 150px;
background-color: red;
position: relative;
}
.zig-line::after,
.zig-line::before {
content: "";
position: absolute;
width: 3px;
height: 100px;
background-color: red;
}
.zig-line::before {
left: 0;
}
.zig-line::after {
right: 0;
bottom: 0;
}
<!-- language: lang-html -->
<div class="top-box" style="background-color: blue;"></div>
<div class="zig-line"></div>
<div class="bottom-box"></div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论