как сделать закругленную снизу фигуру на css радиус был как здесь?

#css

Голубую фигуру надо закруглить,вот так не совсем точно выходит по середине не хватает
выпуклости  

border-bottom-left-radius: 100% 40px;
border-bottom-right-radius: 100% 40px;

    

Ответы

Ответ 1

Чуть чуть геморойно но зато без SVG 

за помощь в создании радиального градиента спасибо @Artur



* {
  margin: 0;
  padding: 0;
}

.item {
  width: 300px;
  margin: auto;
  min-height: 500px;
  background: #fcfcfc;
}

.item__top {
  width: 100%;
  min-height: 150px;
  background-color: red;
  background-image: radial-gradient(ellipse, red 69%, #fff 70%);
  background-size: 260% 240px;
  background-position: -275% -330px;
  text-align: center;
}

.item__top h2 {
  padding: 10px 0;
  font-weight: 900;
  font-family: Helvetica;
  color: white;
}

.item__top p {
  width: 90%;
  font-size: 20px;
  margin: auto;
  color: #fff;
}

  

    
Заполните форму
    
и получите прайс-лист с актуальными расчетами оккумаемости
    
  



Ответ 2

я бы делал это через svg фигуру - тогда и адаптивность будет



.wrap {
	height: 500px;
	width:500px;
	margin: 0 auto;
}

.header {
	height: 100px;
	background-color: #3f59fa;
	position: relative;
}
.header__bottom {
	position: absolute;
	top: 100%;
}

	

		
		
	
		
		
	





либо код svg использовать как отдельное изображение и поместить его в верстку через
псевдоэлемент (::after), тогда html будет выглядеть чище

пример на CodePen