Ребят, привет! Нужна помощь, не могу никак сам справиться. Нужно запилить

Question

Ребят, привет! Нужна помощь, не могу никак сам справиться. Нужно запилить

такого плана баттоны, но они на сайте могут быть с заливкой и прозрачные, с обводкой и без.
Ничего умнее, чем юзать clip-path я не придумал, но получаю проблемы с прозрачным вариантом и обводка получается кривая.
Какие есть варианты ещё, как реализовать такое?

https://jsbin.com/jesoguqoli

#css #frontend #html #programming #russian

0

20.04.2022

16 ответов

13 просмотров

konfuzz Автор вопроса

Daria Shuleko
svg например

а если баттоны будут резиновые, а не фикс?

0

20.04.2022

konfuzz Автор вопроса

konfuzz
а если баттоны будут резиновые, а не фикс?

собирать из трех частей?

0

20.04.2022

konfuzz Автор вопроса

нет идей ни у кого?

0

20.04.2022

SpiritMoon

Обрезать за счёт всевдоэлеметов?

0

20.04.2022

konfuzz Автор вопроса

SpiritMoon
Обрезать за счёт всевдоэлеметов?

не очень понимаю, как именно это реализовать. Может быть есть примеры?

0

20.04.2022

SpiritMoon

konfuzz
не очень понимаю, как именно это реализовать. Може...

У нас 2 уголка, засчет дополнительных стилей для ::after + ::before вы можете обрезать кнопку и накрыть нужными стилями, поищите по сети как делаються разные фигуры через псевдоэлемнты и станет понятнее

0

20.04.2022

konfuzz Автор вопроса

SpiritMoon
У нас 2 уголка, засчет дополнительных стилей для :...

ок, спасибо, буду копать

0

20.04.2022

konfuzz Автор вопроса

SpiritMoon
У нас 2 уголка, засчет дополнительных стилей для :...

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

0

20.04.2022

SpiritMoon

konfuzz
сейчас подумал, что ведь не получится сделать проз...

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

0

20.04.2022

konfuzz Автор вопроса

SpiritMoon
Ошибаетесь, вы пожете влиять на стили как самой кн...

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

0

20.04.2022

SpiritMoon

konfuzz
тогда нужно будет для каждой кнопки закрашивать по...

Тогда можете просто заюзать svg как bg image с наложением цвета и ваша проблема будет решена

0

20.04.2022

konfuzz Автор вопроса

SpiritMoon
Тогда можете просто заюзать svg как bg image с нал...

но мне нужно, чтобы кнопки были резиновые...

0

20.04.2022

konfuzz Автор вопроса

В общем, не придумал, как это оформить без костылей и написал скриптец, который генерит SVG-шку ровно под размер элемента и подкладывает в качестве background-image Можно посмотреть код и как работает здесь: https://jsbin.com/tubihabuje/edit?html,css,js Можно юзать, если понравилось :) Если есть замечания или предложения, как сделать лучше/проще, буду рад выслушать

0

20.04.2022

Serega Mangushev

konfuzz
В общем, не придумал, как это оформить без костыле...

https://blog.avada.io/css/border-examples там нет нужного варианта, но есть похожие.

0

20.04.2022

konfuzz Автор вопроса

Serega Mangushev
https://blog.avada.io/css/border-examples там нет ...