Как реализовать такие границы в вёрстке?
Подскажите, пожалуйста, как сделать подобные границы как на примере ниже (без использования 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> |
<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>
Дополнительно:
например псевдоэлементами которые имеют длину не 100% от высоты элемента
Решение:
.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); } |
.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); }
Ответы:
Привет, напиши пожалуйста css код сюда. Если у каждого дива есть свой размер, то попробуй каждому прописать новый размер, то есть высота дива должна быть равна размеру боковой линии, а ширина пусть остается, например блок w300px и h200px а линия 150px, сделать высоту 150px, пропиши border-right: 1px цвет solid (всем дивам которые распологаются слева) и border-bottom 1px solid цвет + padding-bottom 5px(растояние от блока до линии) и вроде все.
Если не получилось или я не прав, заранее прошу прощения, ведь я новичок. Удачи в выполнении!
- такой подход не подойдёт, потому что у блоков установлены внутренние отступы, также потому что между границами есть промежутки
- Veyder, очень жаль что не смог помочь
- Леонид Добрый, ничего страшного. Будет практика - будет понимание. Просто иногда смотри примеры правильной вёрстки у других людей и сам будешь видеть.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания границ в вёрстке можно использовать различные способы, в зависимости от требуемого визуального эффекта. Вот несколько способов реализации границ:
1. С помощью CSS свойства border:
```html
<div style="border: 1px solid black"> <!-- Ваш контент здесь --> </div>
```
2. Используя CSS классы:
```html
.bordered { border: 1px solid black; } <div class="bordered"> <!-- Ваш контент здесь --> </div>.bordered { border: 1px solid black; } <div class="bordered"> <!-- Ваш контент здесь --> </div>
```
3. С помощью псевдоэлементов:
```html
.bordered::before { content: ""; display: block; border: 1px solid black; } <div class="bordered"> <!-- Ваш контент здесь --> </div>.bordered::before { content: ""; display: block; border: 1px solid black; } <div class="bordered"> <!-- Ваш контент здесь --> </div>
```
4. Используя фреймворки, такие как Bootstrap, Foundation и другие, которые предоставляют готовые классы для создания границ.
5. Для создания более сложных границ, например, с закругленными углами, можно использовать CSS свойства border-radius и box-shadow.
Надеюсь, что данное объяснение поможет вам реализовать границы в вашей вёрстке. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать их.