Изображение границы с радиусом границы - но без наложения цвета границы

Question

Я хочу создать прозрачную круглую кнопку, при нажатии она должна иметь полосатую рамку. Я хотел бы сделать это с помощью HTML, CSS или, если необходимо, java-скрипта.

Вот пример: https://jsfiddle.net/chrichrichri/a9dpg582/38/

border-radius: 50px;

в сочетании с:

border-image: -webkit-repeating-linear-gradient(-40deg, yellow, yellow 10%, orange 11%, orange 20%, yellow 21%), 
    -moz-repeating-linear-gradient(-40deg, yellow, yellow 10%, orange 11%, orange 20%, yellow 21%), 
    repeating-linear-gradient(-40deg, yellow, yellow 10%, orange 11%, orange 20%, yellow 21%);

До сих пор я тестировал его в Firefox - изображение границы учитывает радиус границы, но всегда есть наложение цвета границы - если у меня прозрачность 50%, я вижу полосы и выбранный цвет - но я хочу только полосы… если я использую прозрачный /rgba(0,0,0,0), граница не отображается вообще. Зачем? Буду рад, если кто-нибудь сможет объяснить, что здесь происходит:-)

Подобная тема обсуждалась уже 7 лет назад - но приведенные там решения работают только для элементов со сплошной заливкой - хорошо, вы можете добавить svg эллипс вместо границы - но, возможно, к настоящему времени есть более простое решение. ( Можно использовать border-radius вместе с border-image, у которого есть градиент?)

Answer 1

Ты можешь использовать ::before а также ::after классы

Проверьте эту скрипку