Как такое верстать?

Question

[Александр Осадчий]

Добрый день!

Помогите плиз - верстаю дизайн...и застрелиться хочется - все элемены со срезами, скруглениями, обводками

Не реально сделать набор стилей и использовать в процессе верстки: clip-path не дружит с обводкой и скруглением

Где-то градиент не прикрутишь и т.д - жесть?

Как здесь можно выкрутиться универсально как-то?

Comments

[Ankhena]

Градиентом.
clip-path url

И полистайте ленту, это примерно еженедельный вопрос.
Да, искать будет неудобно, потому что там вопросы сформулированы также толково, как ваш.

Заодно, можете принести подборку из них сюда, другим пригодится.

[Вадим]

Так Вам же уже дали тут https://qna.habr.com/q/1195984 ответ, в чём вопрос?

[Александр Осадчий]

Вадим, кнопку сделать вышло - но там речь о фиксированной высоте - я не могу это применить для адаптивных блоков((

[Вадим]

Александр Осадчий, не понял, о какой фиксированной высоте речь? В том ответе у вас любая может быть высота и длинна "кнопки" с сохранением "скошенности"

[Вадим]

Александр Осадчий, ну, почти любая.

[Антон Литвиненко]

ишь, дизайнера гомна какая....

Answer 1

[VoidVolker]

Самый простой вариант - использовать SVG. Если очень хочется именно через CSS, то вот тут есть похожий вариант, но вот скругление - все равно через SVG.

Comments

[Александр Осадчий]

А как - svg?

С фигмы копировать код - конвертироват в css и через background-image?

Но ведь оно тогда не "резиновое"((

Например - фон выпадающего меню - вот SVG

<svg width="164" height="128" viewBox="0 0 164 128" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.24191 7.18987L7.02169 3.34146C8.49273 1.84371 10.504 1 12.6033 1H158.306C160.898 1 163 3.10163 163 5.69412V115.842C163 117.937 162.16 119.944 160.668 121.415L157.284 124.749C155.821 126.191 153.848 127 151.793 127H5.69412C3.10163 127 1 124.898 1 122.306V12.6719C1 10.6214 1.80506 8.65282 3.24191 7.18987Z" fill="#1C1B20" stroke="#4B4951"/>
</svg>

[VoidVolker]

Открываете картинку в редакторе, отрезаете лишнее от скошенного угла, сохраняете угол и используете его в clip-path url, как вам уже посоветовали в комментариях, с переворотом и масштабированием там, где это надо.

Answer 2

[galkinhtml]

clip-path + border-radius
например:
button {
width: 240px;
height: 124px;
padding: 10px;
background-color: tomato;
border-radius: 12px;
clip-path: polygon(90% 0, 100% 15%, 100% 100%, 10% 100%, 0 85%, 0 0);
}

Comments

[Александр Осадчий]

Если бы было так просто - я бы не спрашивал(



Не работает обводка, + border-radius работает только на не срезанных углах(

[galkinhtml]

Я только набросал, дальше можно с этим поиграться, например: https://codepen.io/galkinhtml/pen/GRdyWzq