Как сверстать такие уголки?

Question

[teotlu]

Доброе утро :)
Есть мысли, как можно сверстать такие уголки, не используя svg и картинки?
Заранее спасибо за помощь.

Comments

[Dave]

А можно узнать, зачем всё усложнять и искать иные пути, когда можно сделать картинками?

[Алексей Уколов]

djay: картинки нужно поддерживать, они неадаптивны. Если есть возможность не плодить сущности, почему бы ее не использовать? Ну и просто для общего развития :)

[teotlu]

djay: можно узнать. Мне просто интересно, из чисто академического любопытства :) Естественно, я скорее всего сделаю их картинками. Но если вдруг предложат красивое решение без них, почему бы не использовать его?

[teotlu]

Алексей Уколов: на самом деле, адаптив там даже близко не лежал (на этом конкретном сайте), но я с вами полностью согласен.

[Lynn «Кофеман»]

lea.verou.me/2011/03/beveled-corners-negative-bord...

Но с тенями придётся повозиться, если вообще получится

[teotlu]

Алексей Тен: класс! Пишите в ответ, отмечу решением.

[teotlu]

Алексей Тен: как считаете, бордеры получится тоже градиентами эмулировать?

[Lynn «Кофеман»]

teotlu: Не знаю. Наверняка будут проблемы на стыках

[teotlu]

Алексей Тен: да, скорее всего. И в указании толщины бордера.

Answer 1

[Сергей delphinpro]

jsfiddle.net/srjz5rwv

Comments

[Алексей Уколов]

На картинке-то фон не однородный :)

[teotlu]

Есть проблемка, бэкграунд сделан паттерном, не однородным цветом. Если приглядеться, это видно. Был бы однородный цвет, можно было бы сделать так, да.

[Сергей delphinpro]

teotlu: jsfiddle.net/srjz5rwv/2 :) (тоже с нюансом, но вдруг)

[Lynn «Кофеман»]

Сергей: fixed это чит :)

[teotlu]

Сергей: очень хитро)) Но бэк ведь может и не паттерном быть, а фоткой, и быть не фиксированным. Хотя я этого не указал в вопросе, так что это вполне себе решение.

[Сергей delphinpro]

teotlu: понимаю, поэтому и упомянул про нюанс.
с градиентами клевая фишка, раньше где-то видел, но сейчас как-то не вспомнил сразу :)

[teotlu]

Сергей: а я не видел, но подозревал, что кто-нибудь предложит что-то такое изящное, потому и создал вопрос :)

Answer 2

[monochromer]

Один вариант - старый clip и absolute
https://jsfiddle.net/0ucLz4oj/

Другой вариант (как уже указали) - радиальные градиенты.

Comments

[teotlu]

Вариант с clip шикарный, спасибо! Очень интересно придумано использовать border + border-radius для создания вогнутого угла.

[teotlu]

Такой вопрос, может быть вы знаете. Использование свойства clip сколько-нибудь заметно отражается на производительности? Может, стоит сделать то же самое с помощью дополнительных элементов и overflow: hidden?

[teotlu]

Сергей Сергеев: ну я хотя бы не прошу, чтобы предложенное решение готовило мне кофе =P

[teotlu]

Сергей Сергеев: и потом, я не прошу сделать это за меня, я просто советуюсь, не будет ли такой вариант лучше и быстрее :)

[monochromer]

teotlu: конкретно, данная версия clip применяется только к абсолютно позиционированным (возможно, и к фиксированным) элементам, поэтому производительность не должна сильно страдать. Стоит заметить, что clip устарел, на его смену пришел clip-path.
https://css-tricks.com/almanac/properties/c/clip/
https://css-tricks.com/clipping-masking-css/
sarasoueidan.com/blog/css-svg-clipping

[teotlu]

monochromer: ну, у clip-path, применённого к html, пока что поддержка так себе, для такого случая проще clip использовать)