Страницы

Поиск по вопросам

вторник, 25 декабря 2018 г.

Кривая граница элемента

Подскажите, пожалуйста, как сверстать границу как на этом скриншоте? Граница, которая после изображения.


Ответ

Вариант на основе статьи "Геометрические фигуры на CSS". С помощью псевдоэлементов :before и :after делаем два треугольника, которыми закрываем нижние углы фотографии.
Псевдоэлементы добавляются до и после содержимого контейнера, поэтому контейнер является родительским блоком по отношению к своим псевдоэлементам. Позиционируем контейнер относительно, а его псевдоэлементы - абсолютно, чтобы вести отсчёт координат от краёв контейнера
bottom: 0; прижимает нижние края треугольников к нижнему краю контейнера. Аналогично left: 0; и right: 0; задают положение для левого и правого края.
1vw равен 1 проценту от ширины области просмотра.
И назначаем картинке свойство display: block;, чтобы между нею и контейнером не возникало лишних просветов.
.container { position: relative; width: 100%; } img { display: block; width: 100%; } .container:after, .container:before { border-bottom: 3vw solid white; bottom: 0; content: ""; position: absolute; } .container:before { border-right: 50vw solid transparent; left: 0; } .container:after { border-left: 50vw solid transparent; right: 0; }


Комментариев нет:

Отправить комментарий