Как реализовать верстку фигуры с помощью CSS без изменения разметки

Что проверяют

Знаете ли вы, какими средствами CSS рисуются формы без лишних тегов, и умеете ли выбрать подходящее под конкретную фигуру. Обычно следом просят нарисовать что-то определённое, например стрелку у тултипа или шестиугольник, и спрашивают, как фигура поведёт себя при резиновой ширине.

Как отвечать

Назовите инструменты и сразу область применения каждого:

• border-radius: круг, овал, капля. border-radius: 50% на квадрате даёт круг, а восемь радиусов через / позволяют получить лист или яйцо;
• трюк с границами: элемент с нулевыми width и height, прозрачные боковые границы и цветная нижняя дают треугольник. Классика для стрелки тултипа, но размер задаётся толщиной границ и плохо тянется;
• clip-path: polygon(), circle(), ellipse(), inset(). Обрезает сам элемент вместе с фоном и содержимым, принимает проценты и анимируется, если у начальной и конечной формы одинаковое число точек;
• псевдоэлементы ::before и ::after: два дополнительных слоя без правки HTML, родителю ставится position: relative, слою position: absolute;
• градиенты и mask: conic-gradient рисует сектора и круговые диаграммы, radial-gradient вырезы и пончики, mask-image прячет часть элемента;
• transform: ромб из квадрата через rotate(45deg), параллелограмм через skew();
• aspect-ratio: сохраняет пропорции фигуры, когда ширина задана в процентах.

Хороший ответ заканчивается выбором: простая форма через border-radius, многоугольник через clip-path, декоративная деталь через псевдоэлемент. Если фигура сложная и её нужно переиспользовать, честно скажите, что SVG здесь проще и доступнее.

Где спотыкаются

Забывают свойство content у псевдоэлемента, и слой не появляется вовсе. Или вешают ::before на img и input: у заменяемых элементов псевдоэлементы не рисуются.

Не знают, что clip-path обрезает и box-shadow. Тень по контуру фигуры делают через filter: drop-shadow() на родительском элементе.

Кладут смысловой текст в content. Скринридеры его зачитывают непредсказуемо, а скопировать или перевести такой текст нельзя, поэтому в псевдоэлементах держат только декор.