Как сделать этот предмет с помощью CSS + HTML(Меня интересует елемент, что находится посередине.)?

Question

[Vane1o]

Comments

[Ankhena]

Взять svg...

[Даниил]

Ankhena, разрешите Вас процитировать

[Ankhena]

Даниил, собственно, я не пишу это в ответы и не предлагаю никому вызовов.

SVG задачу решит? Решит.
Если автор хочет решений с градиентами и border-radius'ами, то может начать с того, что пробовал и не получилось. Делать за него не имею желания.

[Даниил]

Ankhena, SVG задачу не решит, т.к. задача звучит "Как сделать этот предмет с помощью CSS + HTML"

Answer 1

[Даниил]

Вот так

Comments

[Ankhena]

Достаточно одного div и одного bg

<div class="container"></div>

.container {
  width: 130px;
  height: 70px;
  background: radial-gradient(ellipse 100% 90% at left 20%, transparent 99.5%, orange) no-repeat left center/ 33% 100%,
    linear-gradient(orange, orange) no-repeat top center / 34% 100%,
    radial-gradient(ellipse 100% 90% at right 20%, transparent 99.5%, orange) no-repeat right center/ 33% 100%;
}

[Даниил]

Ankhena, действительно, позабыл что градиентов, как и обычных фонов, можно несколько задать, спозиционировав.