1

Ребят, голову уже сломал об это, помогите пожалуйста.
Как сделать вот такую фигуру в css?введите сюда описание изображения

Её особенность в том, что у неё какие-то необычные бока. border-radius углов как я посчитал равен 5px(но я могу где-то ошибаться), но этот бордер радиус не помогает сделать мне левый и правый бок более круглым

2
  • А по высоте фигура должна растягиваться? Там может быть текст внутри или это просто плашка фиксированного размера? Commented 23 февр. 2022 в 8:43
  • Это вообще кнопка в макете который я сейчас пытаюсь заверстать По умолчанию её размеры width: 302px height: 98px
    – Vladislav
    Commented 23 февр. 2022 в 8:46

1 ответ 1

4

Может вам это как-то поможет

div{
  width: 302px;
  height: 98px;
  background-color: red;
  border-bottom-left-radius: 3% 50%;
  border-bottom-right-radius: 3% 50%;
  border-top-left-radius: 3% 50%;
  border-top-right-radius: 3% 50%;
}
<div>
</div>

3
  • Интересно. Никогда не слышал, что можно 2 процентных значения передавать. Как читается (понимается) такая запись? Commented 23 февр. 2022 в 9:12
  • Вау! Спасибо огромное!) Если вы можете это пояснить, то вообще круто, но я уже очень благодарен). В ином случае пойду гуглить эти строки кода)
    – Vladislav
    Commented 23 февр. 2022 в 9:16
  • 2
    @Vladislav тут же всё: developer.mozilla.org/ru/docs/Web/CSS/border-radius но обратите внимание, что в задаче все-таки немного иная форма. Commented 23 февр. 2022 в 9:18

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.