Как сделать блок со скошенным углом?

Question

[z_u_l]

Блок со скосом:

Может кто знает нормальные примеры блока со скошенным углом, помимо этого https://codepen.io/anon/pen/KZxKrg
Суть в том, что данный пример хорош, за исключением того, что если нам нужно поместить внутрь картинку через background image - эта картинка будет всегда поверх бордера, а мне это не подходит. Буду благодарен за нормальный современный пример.

Comments

[Ankhena]

Зависит от окружающего фона и необходимой поддержки браузеров.

Да и вообще покажите весь макет.
Может, там целесообразнее от картинки угол отстричь в фотошопе.

[z_u_l]

Ankhena, Обновил

Answer 1

[Сергей Попов]

Здесь представлены все доступные на текущий момент способы создать скошенные углы

Comments

[z_u_l]

https://habrastorage.org/webt/5a/5e/5a/5a5e5a87b56... нужно что-то типа такого

[Сергей Попов]

z_u_l, в этом случае попробуй картинку поместить внутрь бордера - сделай для блока со скошенным углом overflow:hidden

Answer 2

[profesor08]

Для вот таких вещей есть CSS свойство clip

Comments

[Ankhena]

А граница?

[profesor08]

Тебя кто-то ограничивает одним элементом? Сделал картинку, сделал рамку, разместил одно над другим. Это примитивно.