Формы с clip-path: Тренажер CSS

Тренажер по CSS для пользователей с начальным уровнем подготовки.

В этой серии заданий вы попрактикуетесь в использовании свойства `clip-path` для создания различных непрямоугольных форм и эффектов обрезки элементов. Вам предстоит работать с различными функциями `clip-path`, такими как `circle()`, `ellipse()`, `polygon()`, `inset()` и `url()`. Задания построены от простого к сложному: начиная с базовых фигур и заканчивая более комплексными многоугольниками и использованием SVG для обрезки. Вам нужно будет заполнять пропущенные части CSS кода, чтобы достичь нужного визуального результата, который будет отображаться в окне предпросмотра.

Список тем

Круглая обрезка изображения

Сделайте изображение круглым. У вас есть квадратное изображение, примените к нему CSS свойство, чтобы обрезать его до формы идеального круга с центром в середине изображения.

CSS

.clipped-image {
  width: 200px;
  height: 200px;
  object-fit: cover;
  input1: input2(50% at 50% 50%);
}

                     .clipped-image {
  width: 200px;
  height: 200px;
  object-fit: cover;
  input1: input2(50% at 50% 50%);
}

HTML

<img class="clipped-image" src="https://naytikurs.ru/img/1.png" alt="Example">

Используйте свойство `clip-path` с функцией `circle()`. Значение `50% at 50% 50%` задает радиус круга (50% от меньшей стороны элемента) и его центр (в середине элемента).

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Эллиптическая обрезка

Создайте элемент в форме эллипса. Задайте элементу `div` обтравочный контур в виде эллипса, который полностью вписывается в его границы.

CSS

.ellipse-shape {
  width: 250px;
  height: 150px;
  background-color: #3498db;
  input1: input2(50% 50% at 50% 50%);
}

                     .ellipse-shape {
  width: 250px;
  height: 150px;
  background-color: #3498db;
  input1: input2(50% 50% at 50% 50%);
}

HTML

<div class="ellipse-shape"></div>

Используйте свойство `clip-path` с функцией `ellipse()`. Значения `50% 50% at 50% 50%` задают горизонтальный и вертикальный радиусы (по 50% от ширины и высоты элемента соответственно) и центр эллипса.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Обрезка с отступами (inset)

Обрежьте изображение со всех сторон на 25 пикселей. Используйте функцию `clip-path`, которая позволяет задать прямоугольную обрезку с отступами от краев элемента.

CSS

.inset-image {
  width: 300px;
  height: 200px;
  object-fit: cover;
  input1: inset(input2);
}

                     .inset-image {
  width: 300px;
  height: 200px;
  object-fit: cover;
  input1: inset(input2);
}

HTML

<img class="inset-image" src="https://naytikurs.ru/img/2.png" alt="Example Inset">

Примените свойство `clip-path` с функцией `inset()`. Значение `inset(25px)` создаст отступы по 25px со всех четырех сторон.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Обрезка с разными отступами и скруглением

Создайте прямоугольную обрезку с разными отступами: 10px сверху, 20px справа, 30px снизу, 40px слева. Дополнительно задайте скругление углов в 15px.

CSS

.complex-inset {
  width: 300px;
  height: 200px;
  background-color: #e74c3c;
  clip-path: input1(10px 20px 30px 40px input2 15px);
}

                     .complex-inset {
  width: 300px;
  height: 200px;
  background-color: #e74c3c;
  clip-path: input1(10px 20px 30px 40px input2 15px);
}

HTML

<div class="complex-inset"></div>

Используйте функцию `inset()` со значениями для четырех сторон и ключевым словом `round` для скругления. Формат: `inset(top right bottom left round radius)`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Треугольная форма (polygon)

Превратите квадратный блок в равнобедренный треугольник, указывающий вершиной вверх. Используйте функцию `clip-path`, которая позволяет задавать контур обрезки с помощью координат вершин многоугольника.

CSS

.triangle-shape {
  width: 150px;
  height: 150px;
  background-color: #2ecc71;
  input1: input2(50% 0%, 0% 100%, 100% 100%);
}

                     .triangle-shape {
  width: 150px;
  height: 150px;
  background-color: #2ecc71;
  input1: input2(50% 0%, 0% 100%, 100% 100%);
}

HTML

<div class="triangle-shape"></div>

Используйте `clip-path` с функцией `polygon()`. Координаты вершин задаются парами значений (X Y), где 0% 0% - левый верхний угол, 100% 100% - правый нижний. Для треугольника нужны три пары координат. Например: `polygon(50% 0%, 0% 100%, 100% 100%)`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Форма стрелки (polygon)

Создайте форму стрелки, указывающей вправо, используя `clip-path` и функцию `polygon()`. Задайте необходимые координаты вершин для получения фигуры стрелки.

CSS

.arrow-shape {
  width: 200px;
  height: 100px;
  background-color: #f39c12;
  clip-path: input1(0% 25%, 50% 25%, 50% 0%, 100% 50%, 50% 100%, 50% 75%, input2 75%);
}

                     .arrow-shape {
  width: 200px;
  height: 100px;
  background-color: #f39c12;
  clip-path: input1(0% 25%, 50% 25%, 50% 0%, 100% 50%, 50% 100%, 50% 75%, input2 75%);
}

HTML

<div class="arrow-shape"></div>

Используйте `clip-path: polygon(...)`. Вам понадобится 7 пар координат для создания формы стрелки. Примерный набор координат: `polygon(0% 25%, 50% 25%, 50% 0%, 100% 50%, 50% 100%, 50% 75%, 0% 75%)`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Обрезка с использованием SVG

Используйте SVG элемент, определенный в HTML, для создания сложной формы обрезки для изображения. Свяжите CSS свойство `clip-path` с ID SVG клипа.

CSS

.svg-clipped-image {
  width: 300px;
  height: 250px;
  object-fit: cover;
  input1: input2(#svgClip);
}

                     .svg-clipped-image {
  width: 300px;
  height: 250px;
  object-fit: cover;
  input1: input2(#svgClip);
}

HTML

<svg width="0" height="0">
  <defs>
    <clipPath id="svgClip">
      <path d="M150,0 C40,0 30,100 150,250 C270,100 260,0 150,0 Z" />
    </clipPath>
  </defs>
</svg>

<img class="svg-clipped-image" src="https://naytikurs.ru/img/8.png" alt="SVG Clipped">

В HTML уже определен SVG с элементом `<clipPath>` с `id="svgClip"`. В CSS используйте `clip-path` со значением `url(#svgClip)`, чтобы применить этот SVG контур к элементу.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Анимация clip-path при наведении

Создайте эффект анимации при наведении на элемент. Изначально элемент обрезан кругом небольшого радиуса, а при наведении круг должен плавно расширяться, полностью показывая элемент.

CSS

.animated-clip {
  width: 200px;
  height: 200px;
  background-color: #9b59b6;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2em;
  text-align: center;
  clip-path: circle(20% at 50% 50%);
  input1: input2 0.5s ease-in-out;
}

.animated-clip:hover {
  clip-path: circle(71% at 50% 50%); /* ~sqrt(2)*50% */
}

                     .animated-clip {
  width: 200px;
  height: 200px;
  background-color: #9b59b6;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2em;
  text-align: center;
  clip-path: circle(20% at 50% 50%);
  input1: input2 0.5s ease-in-out;
}

.animated-clip:hover {
  clip-path: circle(71% at 50% 50%); /* ~sqrt(2)*50% */
}

HTML

<div class="animated-clip">Наведи на меня!</div>

Задайте начальный `clip-path: circle(20% at 50% 50%)` для элемента. Для псевдокласса `:hover` измените значение `clip-path` на `circle(71% at 50% 50%)` (примерно 71% нужно для покрытия квадрата). Добавьте свойство `transition` для `clip-path`, чтобы анимация была плавной.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку