Как реализовать декоративный уголок у блока-карточки?

Question

[AlShest]

Пожалуйста, подскажите, как лучше и легче реализовать уголок у блока, как на скрине:


Угол нужно вставить, как изображение? Или это можно как-то сделать псевдоэлементом?

Answer 1

[AShvejnov]

Оптимально - отрисовать уголок в SVG, т.к. он "сложносочинённый" и зафигачить фоном псевдо-элемента :after. SVG хорош будет тем, что легко можно будет масштабировать размер при необходимости.

Comments

[AShvejnov]

Но в случае с вашим уголком в целом его можно "собрать" из двух слоёв, один - повёрнутый тёмно-красный прямоугольник подложкой (before) и оффсетом по position. Второй слой - квадрат с одним сильно скруглённым углом, его вторым слоем поверх (after). Но это уже для особенно замороченных любителей)) я бы всё же сделал через SVG, его и раскрашивать в любой цвет потом удобно через fill.

Answer 2

[Андрей Федоров]

https://codepen.io/aliencash/pen/BayNOGj?editors=1100

Answer 3

[profesor08]

Одним псевдоэлементом не получится. Так как надо сделать красный уголочек и еще два бордовых, которые надо позиционировать относительно большого. Как делать треугольники на CSS гуглится за пару секунд. Позиционировать абсолютом ты должен уметь сам.