CSS Соедините круги пунктирной линией
У меня есть четыре прямоугольника и круг внутри каждого из этих прямоугольников. Я пытаюсь соединить эти круги пунктирной линией, но линия останавливается посередине, не знаю почему. И почему мой первый прямоугольник разрезан пополам?
Вот код: 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 {
но я получаю некоторые странные результаты
Ответы 2
Я пытаюсь соединить эти круги пунктирной линией, но линия останавливается посередине пути.
Это потому, что вы жестко запрограммировали высоту пунктирной линии, а она не соответствует правильному расстоянию между кругами. Вы можете просто поместить его под прямоугольник, чтобы вместо этого он мог использовать высоту прямоугольника.
Если вам нужно настроить поля прямоугольника так, чтобы они были больше круга, вы можете использовать пользовательские свойства для скорректированного поля.
И почему мой первый прямоугольник разрезан пополам?
Как упомянул @A-Haword в комментарии, это связано с тем, что высота области просмотра меньше общей высоты содержимого, но содержимое центрируется. Либо удалите ограничение по высоте, добавьте переполнение, либо удалите центр (align-items).
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;
--rectangle-margin: 1em;
margin: var(--rectangle-margin) 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: calc(100% + var(--rectangle-margin));
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>Пожалуйста! Если хотите, вы можете принять ответ, который решает вашу проблему, и вопросы будут помечены как решенные.
Измените высоту тела на проценты вместо высоты области просмотра:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
margin: 0;
background-color: #e0e0e0;
}
и удалите верхнюю часть поля «.rectangle:first-child», это должно решить вашу вторую проблему.
Вы задали body фиксированную высоту, но (в некоторых окнах просмотра, а не в больших) общая сумма содержимого больше - следовательно, первый элемент можно обрезать, поскольку вы центрировали объекты по вертикали.