我有四个矩形,每个矩形内都有一个圆。我试图用虚线连接这些圆圈,但线停在中间,我不知道为什么。 另外为什么我的第一个矩形被切成两半?
这是一个代码笔:https://codepen.io/onche-onche/pen/LYoZBex
这是代码:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #e0e0e0;
}
.quatre-rectangles {
width: 50%;
position: relative;
}
.rectangle {
height: 19em;
margin: 1em 0;
background-color: #fef1f2;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
display: flex;
justify-content: center;
border-radius: 40px;
padding: 1em;
box-sizing: border-box;
}
.rectangle:first-child {
margin-top: 400px;
}
.circle {
width: 3em;
height: 3em;
background-color: #41be54;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 1.5em;
font-family: 'Lexend Deca', sans-serif;
position: relative;
z-index: 1;
margin-top: 1em;
align-self: center;
}
.rectangle:not(:last-child) .circle::after {
content: "";
position: absolute;
bottom: -7em;
left: 50%;
width: 0;
height: 8em;
border-left: 4px dotted #41be54;
transform: translateX(-50%);
z-index: 0;
opacity: 0.5;
}
<body>
<div class="quatre-rectangles">
<div class="rectangle">
<div class="circle">1</div>
</div>
<div class="rectangle">
<div class="circle">2</div>
</div>
<div class="rectangle">
<div class="circle">3</div>
</div>
<div class="rectangle">
<div class="circle">4</div>
</div>
</div>
</body>
我尝试改变它的高度:
.rectangle:not(:last-child) .circle::after {
但是我得到了一些奇怪的结果
这是因为您硬编码了虚线的高度,而硬编码的高度与圆之间的正确距离不匹配。您可以简单地将它放在矩形下方,这样它就可以使用矩形高度。
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #e0e0e0;
}
.quatre-rectangles {
width: 50%;
position: relative;
}
.rectangle {
height: 19em;
margin: 1em 0;
background-color: #fef1f2;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
display: flex;
justify-content: center;
border-radius: 40px;
padding: 1em;
box-sizing: border-box;
}
.rectangle:first-child {
margin-top: 400px;
}
.circle {
width: 3em;
height: 3em;
background-color: #41be54;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 1.5em;
font-family: 'Lexend Deca', sans-serif;
position: relative;
z-index: 2;
margin-top: 1em;
align-self: center;
}
.rectangle:not(:last-child)::before {
content: "";
position: absolute;
/* bottom: -7em; */
top: 50%;
left: 50%;
width: 0;
height: 100%;
border-left: 4px dotted #41be54;
transform: translateX(-50%);
z-index: 1;
opacity: 0.5;
}
<div class="quatre-rectangles">
<div class="rectangle">
<div class="circle">1</div>
</div>
<div class="rectangle">
<div class="circle">2</div>
</div>
<div class="rectangle">
<div class="circle">3</div>
</div>
<div class="rectangle">
<div class="circle">4</div>
</div>
</div>
或者,如果您需要将矩形边距调整为大于圆形,您可以使用自定义属性来调整线条的高度。