Как реализовать такие границы в вёрстке?

Question

[Veyder]

Подскажите, пожалуйста, как сделать подобные границы как на примере ниже (без использования border):

Вёрстка:

<ul>
          <li>
            <img src="">
            <div class="text-wrapper">
              <h3>Сайт<br> Визитка</h3>
            </div>
          </li>
          <li>
            <img src="">
            <div class="text-wrapper">
              <h3>Сайт<br> Каталог</h3>
            </div>
          </li>
          <li>
            <img src="">
            <div class="text-wrapper">
              <h3>Интернет<br> Магазин</h3>
            </div>
          </li>
          <li>
            <img src="">
            <div class="text-wrapper">
              <h3>Landing<br> Page</h3>
            </div>
          </li>
          <li>
            <img src="">
            <div class="text-wrapper">
              <h3>Корпоративный Сайт</h3>
            </div>
          </li>
          <li>
            <img src="">
            <div class="text-wrapper">
              <h3>Промо<br> Сайт</h3>
            </div>
          </li>
          <li>
            <img src="">
            <div class="text-wrapper">
              <h3>Портал</h3>
            </div>
          </li>
          <li>
            <img src="">
            <div class="text-wrapper">
              <h3>Блог</h3>
            </div>
          </li>
          <li>
            <img src="">
            <div class="text-wrapper">
              <h3>Обслуживание</h3>
            </div>
          </li>
          <li>
             <a href="#">Все услуги</a>
          </li>
        </ul>

Comments

[Антон Литвиненко]

например псевдоэлементами которые имеют длину не 100% от высоты элемента

Answer 1

[Veyder]

Решение:

.li:nth-child(odd)::before {
    content: "";
    position: absolute;
    top: 12px;
    right: 0;
    width: 1px;
    height: 70px;
    background-color: rgba(0, 0, 0, 0.1);
  }

  .li:nth-child(odd)::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 2%;
    width: 196%;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.1);
  }

Answer 2

[Леонид Добрый]

Привет, напиши пожалуйста css код сюда. Если у каждого дива есть свой размер, то попробуй каждому прописать новый размер, то есть высота дива должна быть равна размеру боковой линии, а ширина пусть остается, например блок w300px и h200px а линия 150px, сделать высоту 150px, пропиши border-right: 1px цвет solid (всем дивам которые распологаются слева) и border-bottom 1px solid цвет + padding-bottom 5px(растояние от блока до линии) и вроде все.
Если не получилось или я не прав, заранее прошу прощения, ведь я новичок. Удачи в выполнении!

Comments

[Veyder]

такой подход не подойдёт, потому что у блоков установлены внутренние отступы, также потому что между границами есть промежутки

[Леонид Добрый]

Veyder, очень жаль что не смог помочь

[Veyder]

Леонид Добрый, ничего страшного. Будет практика - будет понимание. Просто иногда смотри примеры правильной вёрстки у других людей и сам будешь видеть.