@eugenedrvnk

Как корректно сверстать подобное?

В вёрстке встречается подобный момент :
image
UHvY1L7.png

Возникают сомнения касаемо того, как правильнее будет выстраивать боковые рамки из точек.
Если говорить про рамки, которые идут сплошным цветом, то там в принципе вопросов не возникает, в случае же с точками, я вижу 2 способа. Либо через border-image, либо же просто каждый элемент верстать флексом, и в него, в начало, вставлять изображение с точками.
Есть ли ещё какие - то чуть более удобные способы для подобных конструкций?
  • Вопрос задан
  • 192 просмотра
Пригласить эксперта
Ответы на вопрос 2
@Flying
У общего блока добавляем:
background-image: url(<картинка с точками, можно как data url>);
background-position: top left; 
background-repeat: repeat-y; 
padding-left: <размер фона по Y + отступ до контента>;

Для каждого из элементов добавляем:
position: relative; 
&:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0 - <размер отступа>;
  transform: translate(50%, 50%);
  border: <размер белого пространства сверху / снизу> solid #fff;
  <и здесь либо рисуем элемент через width, height, background-color, border-radius либо картинками, думаю что второе предпочтительнее> 
}

Правда такой способ в зависимости от высоты элементов может дать частично закрытые точки, для того чтобы этого избежать надо будет контролировать высоту элементов с тем чтобы она была кратна шагу между точками.
Ответ написан
@strelok011
я бы предложил сделать иначе.
Можно точку повесить на ::before
li {
    display: inline-block;
    position: relative;
}
li::before {
    display: inline-block;
    border: 9px double white;
    width: 8px;
    height: 8px;
    background: black;
    border-radius: 40px;
    content: "";
    top: 0;
    left: 0;
}}

а пунктир - на ::after
li::after{
    display: inline-block;
    border: 1px dotted black;
    width: 0px;
    height: calc(100% - 20px);
    content: "";
    bottom: 0;
    left: 0;
}}


Что-то в этом роде.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы