Tornar bottom div meio arredondadas

[Guga Alves 1]

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

Imagem

 

sem utilizar imagens.

 

 

[Armando Galeano 0]

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?

[Douglas Ribeiro Imasters 1]

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

 

 

[Guga Alves 1]

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