Круг вырезан с полностью прозрачной рамкой?
Я работаю над проектом, в котором есть кнопка «Свяжитесь с нами». Эта кнопка требует индикации состояния. Я прочитал следующую статью, в которой индикация статуса отображается на изображении аватара. Самое интересное в этом то, что у него полностью прозрачная граница (она также обрезает часть изображения, которая находится под границей индикатора).
Я хочу сделать то же самое, но с элементом кнопки, но понятия не имею, как это сделать.
Простая версия моего кода:
button {
border-radius: 50%;
width: fit-content;
aspect-ratio: 1;
border: none;
background-color: purple;
padding: 1rem;
}<button>
<img src = "chat.svg" width = "50px" />
</button>Я пытался изменить теги и классы на теги и классы, соответствующие моему документу, но это все портит. Я обнаружил, что свойство маски не применяется ни к чему, кроме изображения (если я прав). Я не использую никаких изображений, поэтому пришлось разбираться и искать альтернативу.
Ответы 1
Этот код предназначен для работы с изображениями, но с кнопками все может быть проще.
button {
--g: 5px; /* gap */
--r: 20px; /* circle size*/
font-size: 30px;
padding: .5em 1em;
border-radius: .25em;
border: none;
background:
radial-gradient(calc(var(--r)/2 + var(--g)) at 100% 100%,
#0000 95%,red);
border-image:
radial-gradient(50% 50%,blue 95%,#0000)
100%/0 var(--r) var(--r) 0/
0 calc(var(--r)/2) calc(var(--r)/2) 0;
}<button>Button</button>Если вы хотите понять синтаксис border-image, прочитайте это: https://www.smashingmagazine.com/2024/01/css-border-image-property/
@isherwood интересная точка зрения! Математики используют их постоянно, особенно r для радиуса.
Я не уверен, почему это не очевидно для любого разработчика программного обеспечения. Если бы вы встретили --g в файле, вы бы понятия не имели, что это значит. В математике есть несколько общих стандартов. Это не то.
Почему бы не
--gapи--radius? Однобуквенные переменные просто плохи.