Подскажите, пожалуйста, как сверстать границу как на этом скриншоте?
Граница, которая после изображения.
Ответ
Вариант на основе статьи "Геометрические фигуры на 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;
}
Комментариев нет:
Отправить комментарий