Tornar bottom div meio arredondadas

>

15 minutos atrás, Guga Alves disse:

Pessoal seguinte, gostaria de saber se é possível fazer este efeito em uma div:

Imagem

sem utilizar imagens.

Eu não sei se eu entendi direito, mas, o que você quer fazer é o círculo azul, sem imagem, puro html e css?

pensei na hora usar o clip-path, https://bennettfeely.com/clippy/ - deve ter feito, usando o ellipse.

mas pesquisando sobre curves css3 achei um usando border-radius.

https://stackoverflow.com/questions/20803489/draw-a-curve-with-css

brincando rápido

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

<style>
 .container {
 width: 100%;
 height: 200px;
 position: relative;
 }

 .blue {
 bottom: 0;
 left: -10%;
 position: absolute;
 width: 120%;
 height: 100px;
 border-radius: 50%/100px 100px 0 0;
 background: blue;
 }
</style>

	 

	mas hoje tem svg, canvas e tudo mais que possível desenhar a forma que quiser. 

	 

	tem m

>

Em 03/07/2019 at 18:45, Armando Galeano disse:

Eu não sei se eu entendi direito, mas, o que você quer fazer é o círculo azul, sem imagem, puro html e css?

Sim, exatamente assim

>

Em 03/07/2019 at 20:44, Douglas Ribeiro Imasters disse:

pensei na hora usar o clip-path, https://bennettfeely.com/clippy/ - deve ter feito, usando o ellipse.

mas pesquisando sobre curves css3 achei um usando border-radius.

https://stackoverflow.com/questions/20803489/draw-a-curve-with-css

brincando rápido

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

<style>
 .container {
 width: 100%;
 height: 200px;
 position: relative;
 }

 .blue {
 bottom: 0;
 left: -10%;
 position: absolute;
 width: 120%;
 height: 100px;
 border-radius: 50%/100px 100px 0 0;
 background: blue;
 }
</style>

  

 mas hoje tem svg, canvas e tudo mais que possível desenhar a forma que quiser. 

  

 tem m

  

  

	Pensei em SVG, exatamente pelo custo beneficio qualidade/peso. Obrigado