Как оформить крутую кнопку овальной формы

Question

Я пытаюсь создать ярлык или кнопку с текстом внутри.Я знаю, как задать радиус границы и сделать его овальным, но мне нужна кнопка или метка в форме глаза, как показано ниже.

я следовал по этой ссылке https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_shapes_ovalбез каких-либо результатов, таких как прямоугольные формы с круглой рамкой ниже

, тогда я попробовал приведенный ниже код, но только углы округляются.

.boc1 {
    border-width: 1;
    border-radius: 100;
    padding: -2px;
    margin: 10% 0 0 0;
    padding: 10% 0 10% 0;
    height:100%;
    width:85%;
}

Надеюсь, вы в курсе проблемы ..!

Answer 1

Использование clip-path

XML

<GridLayout>
    <StackLayout class="oval"></StackLayout>
    <Label class="h2" text="Some text" color="white" verticalAlignment="center"
        horizontalAlignment="center"></Label>
</GridLayout>

CSS

.oval {
    width: 85%;
    background-color: red;
    clip-path: ellipse(50% 15% at 50% 50%);
}

Answer 2

Изменить радиус границы как border-radius:50px;