Каким образом можно создать такие линии с использованием CSS и HTML?

Question

Андрей

метаданные , верстка

Каким образом можно создать такие линии с использованием CSS и HTML?

Как повторить синую линию, которая находится в углах сверху и снизу на фотографии?

31 октября 2023 г. 22:08

Ответы на вопрос 1

Похожие вопросы

Answer 1

Для создания таких линий с использованием CSS и HTML можно воспользоваться псевдоэлементами (::before, ::after) и абсолютным позиционированием.

Пример кода:

HTML:
```html
<div class="image-container">
  <img src="image.jpg" alt="Image">
</div>
```

CSS:
```css
.image-container {
  position: relative;
}

.image-container::before,
.image-container::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: blue;
}

.image-container::before {
  top: 0;
}

.image-container::after {
  bottom: 0;
}
```

В данном примере создаются псевдоэлементы ::before и ::after, которые оформлены как горизонтальные линии синего цвета. Они позиционируются абсолютно относительно родительского элемента .image-container. Псевдоэлемент ::before располагается вверху, а псевдоэлемент ::after - внизу.