Новости

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

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

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

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

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

Источник

Статьи по теме

Добавить комментарий

Ваш адрес email не будет опубликован.

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Back to top button