Как сверстать такой блок с уголком?

Question

[Василь Бойко]

конечно есть решения, с :after, и сделать треугольник с белой рамкой средствами CSS.
но все это:
1) некрасиво, как на меня;
2) сверху блока идёт градиент серого цвета ..

Answer 1

[Павел]

а я бы не мучался и влепил картинку дедовским способом...

Comments

[Василь Бойко]

так и делаю уже :)

[Кирилл]

Василь Бойко: если не на белом фоне, то нужно изображение в png с прозрачностью сохранять. В этом случае на много лучше через after повесить треугольник сверху, чем заставлять пользователя грузить несколько мегабайт бесполезных изображений.

[Василь Бойко]

Кирилл Кубляков: ну это и так понятно

Answer 2

[dom1n1k]

"Идеального" способа, к сожалению, нет.
Все варианты либо костыльны и некрасивы с точки зрения кода (например, нашлепывать сверху белый треугольник), либо не совсем кроссбраузерны (отсечение по SVG-маске), либо геморны для контент-менеджера (готовить картиники с уже обрезанным углом).

Answer 3

[Амир Алимжанов]

с помощью :before
{
content:'';
position:absolut;
top:0;
right:0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 50px 50px 0;
border-color: transparent #fff transparent transparent;
}