Изображения внутри треугольников
У нас есть четыре изображения, каждое из которых поместим в свой собственный треугольник. Полученные четыре маленьких треугольника поместим в один большой треугольник.
HTML-разметка
Создадим контейнер container, куда поместим четыре блока div с изображениями. Один блок с классом card - это будущий треугольник.
<div class="container">
<div class="card">
<img src="img2.jpg">
</div>
<div class="card">
<img src="img1.jpg">
</div>
<div class="card">
<img src="img4.jpg">
</div>
<div class="card">
<img src="img3.jpg">
</div>
</div>
CSS код
С помощью CSS-свойств сделаем наш контейнер флексовым и переместим его в центр страницы.
*{
margin: 0;/*обнуление отступов*/
padding: 0;/*обнуление полей*/
box-sizing: border-box;/*метод расчета размеров блока*/
}
body {
display: flex;/*сетка flexbox*/
justify-content: center;/*горизонтальное выравнивание*/
align-items: center;/*вертикальное выравнивание*/
min-height: 100vh;/*на всю высоту*/
}
.container {
position: relative;/*относительное позиционирование*/
display: flex;
flex-wrap: wrap;/*разрешен перенос элементов на новую строку*/
justify-content: center;
align-items: center;
width: 600px;/*ширина контейнера*/
gap: 12px 0;/*промежуток между столбцами в сетке*/
}
Для создания фигуры треугольника перейдем в онлайн-генератор CSS clip-path maker и скопируем оттуда код polygon.
.container .card{
position: relative;
width: 300px;/*ширина блока*/
height: 300px;/*высота блока*/
overflow: hidden;
margin: 0 -68px;
clip-path: polygon(50% 100%, 0 0, 100% 0);/*фигура треугольник*/
}
В середине конструкции образовались пустоты. Чтобы большой треугольник красиво заполнить маленькими, изменим форму второго треугольника.
Обратимся к нему через псевдокласс nth-child с другими значениями фигуры polygon.
.container .card:nth-child(2){
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.container .card img{
transition: 0.5s;
}
.container .card:hover img{
transform: scale(1.5);/*масштабирование при наведении*/
}
Если Вам не хватает знаний для лучшего восприятия этого урока, то посмотрите мой видеокурс "Верстка сайта с нуля 2.0".
-
Создано 21.01.2022 10:39:36
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.