Изображения внутри треугольников

Изображения внутри треугольников

Изображения внутри треугольников

У нас есть четыре изображения, каждое из которых поместим в свой собственный треугольник. Полученные четыре маленьких треугольника поместим в один большой треугольник.

Изображения внутри треугольников

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».

Источник