Блок с закруглениями?

#javascript #html #css #css3

Надо чтобы был такой div как на картинке. Пробовал через border-radius: 0% 0% 50%
50% / 0% 0% 40% 40%; Но там получаются нижние края загнутые, а надо как на картинке
    

Ответы

Ответ 1

Вот так 



div {
  width: 100%;
  height: 300px;
  margin: auto;
  background: red;
  -webkit-clip-path: ellipse(75% 47% at 52% 25%);
  clip-path: ellipse(75% 47% at 52% 25%);
}



Ответ 2

Думаю вы так имели ввиду?:)



#main::before{
    background-color: white;
    content: '';
    position: absolute;
    z-index: -5;
    top: 50%;
    left: -20%;
    width: 180%;
    height: 100%;  
}
#main::after{
    background-color: #FFC107;
    content: '';
    position: absolute;
    z-index: 2;       
    left: -20%;;
    width: 140%;
    height: 100%;
    border-radius: 80%;
}
#main{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 50%;
	height: 100px;
  overflow: hidden;
	background: #ffc107;
	transform: translateX(-50%)translateY(-50%);
}



Ответ 3

Можно сделать жёлтый блок побольше, чтобы border-radius превратился в "свисающее брюшко" 



body {
  overflow: hidden;
}
* {
  margin: 0;
  padding: 0;
}
div {
  background-color: yellow;
  width: 150%;  
  margin-left: -25%;
  height: 300px;
  border-radius: 0 0 50% 50%;
}