Как сделать углы на css?

Question

[dr-might]

как на css сделать такие углы как на картинке?

Comments

[Nikolay Talanov]

А по дизайну какие примерно паддинги у контента подразмеваеются? Ибо если подразумевается паддинг на ширину скоса справа, то у мне кажется можно легко сделать с помощью SVG. Есть еще простой вариант с CSS Clip-path Polygon, но у него поддержка сейчас мизерная.

Answer 1

[Nikolay Talanov]

Итак, решения которые приходят в голову:
1) CSS clip-path: polygon(%цифры или проценты%) - по идее самое идеальное решение, но поддержка браузерами вас вряд ли порадует.
2) SVG. То есть берете прозрачный див, внутрь кладете SVG polygon/path с position: absolute и примененным к нему svg фильтром для box-shadow. Адаптивности можно легко добиться с помощью аттрибутов viewBox и preserveAspectRatio. Ну и соответственно поверх свг идет контент, который лежит внутри дива.
3) Картинка. Ужасный вариант, забудьте :)
4) Какие-нибудь адские хаки с :before, :after. На фоне свг вообще не боец.

Сырая демка - codepen.io/suez/pen/2d7d1453a9d842b85ae307e4244cc237

Comments

[Nikolay Talanov]

Aingis: Смогу. PreserveAspectRatio для этого и создан. xMaxYMax будет начинать отрисовку svg с правого нижнего угла. Дальше вам надо лишь поиграться с viewBox и выбрать между meet/slice в PAR.

[Nikolay Talanov]

Aingis: Так, извиняюсь, я вас не так понял. Подумал что речь идет о сохранении соотношения сторон, а не о конкретно 60х60 пикселей в любой ситуации. Для такого в голову приходит только вариант, когда svg позиционируется в блоке с right: 0; bottom: $box-shadow-height; с каким-то большим фиксированным размером, и к основному блоку применяется overflow: hidden; В итоге нижний правый угол будет всегда 60х60, тень будет влезать благодаря bottom: $box-shadow-height; придется лишь только в высоту блока закладывать эту тень снизу. Решение явно не самое красивое, но ничего более автоматизированного в голову не приходит.