Скругление двух углов у кнопки на 100%

Question

Подскажите пожалуйста, как сделать такое скругление?

border-radius: 0 100%;

не то.

Answer 1

Воть, span просто создал, чтобы проверить, как внутренние элементы будут влиять на радиусы. Вроде рабочая штука получилась.

.skruglenie {
  display: block;
  box-sizing: border-box;
  width: 300px;
  border-radius: 0 15vw 0 15vw;
  border: 2px solid black;
}
span {
  display: block;
  height: 100px;
}

<div class="skruglenie"><span></span></div>

Answer 2

.btn {
        border-radius: 0 30px 0 30px;
    }

<button class="btn">button</button>

Answer 3

Зачем что-то мудрить, есть 100% решение на любой размер элемента :)

* {
  box-sizing: border-box;
}

.cool-border-radius {
  display: block;
  width: 120px;
  height: 120px;
  border-radius: 0 50%;
  border: 2px solid black;
}

<div class="cool-border-radius"></div>

P.S. Хотя стоит отметить, что могут возникнуть проблемы, если высота и ширина будет слишком не прапрорциональны.

БЛОГ НА HUSL

Скругление двух углов у кнопки на 100%

Ответы (3 шт):