Как сделать фигуру?

Question

[LOBBY GIRL]

Подскажите, как сделать вот такую вот фигуру, желательно с объяснениями, что бы я потом сам умел)

Answer 1

[lemme]

Квадрат, плюс треугольник (псевдоэлемент).
https://jsfiddle.net/y6fwxuss/

На заметку.
https://habrahabr.ru/post/126207/

Answer 2

[Александр]

Обычный блок (квадрат) + треугольник с position:absolute, сделанный псевдоэлементом before или after.

Answer 3

[Даниил Сорокин]

Есть несколько способов:

1. Делаешь просто квадратный блок. Вырезаешь треугольник пнгшкой. Делаешь псевдоэлемент, с фоном этой пнгшкой.
   
2. Делаешь квадратный блок, с псевдо элементом. Псевдоэлемент делаешь css треугольником.
   

Answer 4

[dom1n1k]

Я бы сделал просто картинкой в фоне. Пользы от псевдоэлемента тут не вижу особой.

Comments

[dom1n1k]

А в псевдоэлементе не будет картинки? Будет та же самая. Ну и если каждый запрос критичен, есть base64.
Картинка универсальна, потому что завтра дизайнер захочет на этот элемент градиентик кинуть или текстурку. Или к новогодним праздникам снежинками украсить.
Размеры не проблема.