7

Eu gostaria de fazer com que um elemento fique meio arredondado, ele não é um elipse, nem um círculo, e nem um elemento com border-radius. Ele é uma forma meio arredondada como podem ver na imagem abaixo e que não consegui fazer com CSS.

inserir a descrição da imagem aqui

Eu tentei chegar nessa forma abaloada, mas não consegui, ele ainda fica um uma parta reta em cada um dos lados. eu gostaria que cada um dos lados ficasse curvado bem como nessa imagem de referencia.

Segue meu código.

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: rgb(231, 247, 255);
}
.box {
    width: 155px;
    height: 150px;
    background-image: linear-gradient(red, blue);
    border-radius: 45%;
    margin: 1rem auto;
}
<div class="box"></div>

OBS: Sei que com SVG eu consigo, mas minha intenção é que seja apenas com CSS

2 Respostas 2

6

Existe a propriedade CSS clip-path que você pode usar para cortar partes indesejadas do background do elemento.

Este artigo do CSS Tricks tem uns exemplos legais para entender como a propriedade funciona.

Para definir um shape complexo você pode:

  • Usar o path() que recebe como parâmetro um string contendo um path no mesmo formato do path SVG.

    clip-path: path("M10 10 H 90 V 90 H 10 L 10 10");
    
  • Usar um ClipPath SVG e referenciá-lo no CSS.

    clip-path: url("#meu-clip");
    

Abaixo é o path da sua imagem vetorizado que utilizarei nos exemplos:

m59.533456,149.455558c-16.519209,-1.510568 -33.831918,-7.984429 -41.622636,-15.609198c-24.814882,-24.169081 -23.227884,-99.913255 2.452634,-119.694497c11.686078,-8.991474 31.018602,-13.810903 55.256394,-13.810903c19.548933,0 32.605601,2.445681 44.796633,8.344088c15.437165,7.480906 23.30002,20.140901 27.988878,45.101232c1.731271,9.423064 1.731271,33.37635 -0.072136,43.302937c-1.514862,8.559883 -5.338085,20.50056 -8.512082,26.54283c-3.390405,6.401929 -11.181124,13.882835 -18.25048,17.479425c-12.118896,6.258066 -26.257608,8.919542 -46.239359,8.703746c-7.141492,-0.071932 -14.210848,-0.215795 -15.797846,-0.359659z

Exemplos

path()

body {
  background-color: #eedddd;
  display: flex;
  justify-content: center;
  padding: 15px;
}

.quadrado {
  display: inline-block;
  width: 150px;
  height: 150px;
  background: linear-gradient(#3ce092, #3b91b7);
  clip-path: path("m59.533456,149.455558c-16.519209,-1.510568 -33.831918,-7.984429 -41.622636,-15.609198c-24.814882,-24.169081 -23.227884,-99.913255 2.452634,-119.694497c11.686078,-8.991474 31.018602,-13.810903 55.256394,-13.810903c19.548933,0 32.605601,2.445681 44.796633,8.344088c15.437165,7.480906 23.30002,20.140901 27.988878,45.101232c1.731271,9.423064 1.731271,33.37635 -0.072136,43.302937c-1.514862,8.559883 -5.338085,20.50056 -8.512082,26.54283c-3.390405,6.401929 -11.181124,13.882835 -18.25048,17.479425c-12.118896,6.258066 -26.257608,8.919542 -46.239359,8.703746c-7.141492,-0.071932 -14.210848,-0.215795 -15.797846,-0.359659z");
}
<div class="quadrado"></div>

Vale lembrar que o clip-path é experimental, então o suporte é bem baixo.

O exemplo acima funciona no Firefox 64 ativando a flag:

layout.css.clip-path-path.enabled

SVG

body {
  background-color: #eedddd;
  display: flex;
  justify-content: center;
  padding: 15px;
}

.quadrado {
  display: inline-block;
  width: 150px;
  height: 150px;
  background: linear-gradient(#3ce092, #3b91b7);
  clip-path: url("#tela-tv-tubo");
}
<div class="quadrado"></div>

<svg width="0" height="0">
  <defs>
    <clipPath id="tela-tv-tubo">
      <path d="m59.533456,149.455558c-16.519209,-1.510568 -33.831918,-7.984429 -41.622636,-15.609198c-24.814882,-24.169081 -23.227884,-99.913255 2.452634,-119.694497c11.686078,-8.991474 31.018602,-13.810903 55.256394,-13.810903c19.548933,0 32.605601,2.445681 44.796633,8.344088c15.437165,7.480906 23.30002,20.140901 27.988878,45.101232c1.731271,9.423064 1.731271,33.37635 -0.072136,43.302937c-1.514862,8.559883 -5.338085,20.50056 -8.512082,26.54283c-3.390405,6.401929 -11.181124,13.882835 -18.25048,17.479425c-12.118896,6.258066 -26.257608,8.919542 -46.239359,8.703746c-7.141492,-0.071932 -14.210848,-0.215795 -15.797846,-0.359659z"/>
    </clipPath>
  </defs>
</svg>

3
  • O SVG sei que poderia resolver o caso, mas minha intenção ainda é conseguir com CSS ... se for possível...
    – hugocsl
    Commented 19/12/2018 às 12:40
  • 1
    Se eu conseguir converter o <path> para css poligon eu consigo retirar.. atualiza assim que descobrir um jeito Commented 19/12/2018 às 12:42
  • Arrumei outra forma.... e vc não vai acreditar :D prntscr.com/lx7q1u amavou publicar!
    – hugocsl
    Commented 19/12/2018 às 23:13
5

Opção 1

Com apenas uma div e seus pseudo-elementos ::after e ::before é possível chegar em um resultado bem fiel a imagem de referência.

A ideia é ter uma div principal como container. Depois no elemento ::before criamos um linear-gradiente que sera a nossa cor de fundo. E posteriormente vamos colocar um border-radius nesse ::before apenas para fazer um ajuste fina na curvatura dos vértices.

O segundo passo é com o ::after. Aqui é o ponto principal, pois o ::after vai receber DOIS radial-gradiente, um na vertical e outro na horizontal, esses gradientes começam da cor transarente para a cor de fundo que no caso e branco. Como o ::after fica por cima do ::before ele vai funcionar como uma máscara.

Para ajudar a entender deixo esse diagrama. inserir a descrição da imagem aqui

Aqui o border-radius foi aplicado no ::before para fazer o ajuste fino nos cantos. inserir a descrição da imagem aqui

Esse é o resultado final, ainda dando uma margem para ajustes :D

inserir a descrição da imagem aqui

Código referente a imagem acima. Deixe os comentários no código de onde fazer os ajustes.

html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0;
}
body {
    display: flex;
    align-items: center;
    justify-content: center;
}
.box {
    height: 21.5vw;
    width: 22vw;
    position: relative;
}
.box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-image:  linear-gradient(to top, #2196F3 20%,#3CDE92 80%);
    background-position: center;
    background-size: 170% 230%;
    background-repeat: no-repeat;
/* controla o ajuste fino nos cantos */
    border-radius:46%;
}
.box::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
/* cor da mascara deve ser igual a cor do fundo */
    background-image: radial-gradient( transparent 38%, rgba(255, 255, 255, 1) 39%), radial-gradient( transparent 38%, rgba(255, 255, 255, 1) 39%);
    background-position: center;
    background-size: 170% 230%, 230% 170%;
}
<div class="box"></div>

OBS: A limitação é que a cor da mascara feita com o radial-gradiente do ::after deve ser a mesma cor de fundo, deve ser uma cor sólida de preferência...


Opção 2

Essa acho que ainda não é o modelo perfeito, mas é uma opção com o fator crossbrowser bem melhor. Ela é feita com 2 pseudos-elementos ::after e ::before em uma div e linear-gradient. Também precisei usa transforme para tentar deixa o mais próximo da imagem de referência. Também precise colocar essa div dentro de um container, apenas para fazer um ajuste fino de transform: scaleY(.95) para tentar ficar mais fiel a imagem base.

inserir a descrição da imagem aqui

Fiz o modelo tratado ao lado de um circulo completo com border-radius: 50% e outro com border-radius: 45%, a diferença é sutil, mas achei que valia a penda deixar a resposta ai.

Segue o código do modelo acima

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  background-color: #ddd;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.container {
  position: absolute;
  width: 100px;
  height: 100px;
  transform: scaleY(.95);
}
.box {
  position: absolute;
  width: 100px;
  height: 100px;
  transform: rotate(-45deg);
  border-radius: 41%;
  background: linear-gradient(225deg,#3CDE92, #3B92B7);
}
.box::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(to left,#3CDE92, #3B92B7);
  transform: scaleX(1.1) rotate(-45deg);
}
.box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(to left,#3CDE92, #3B92B7);
  transform: scaleY(1.1) rotate(-45deg);
}
.controle {
  position: absolute;
  width: 105px;
  height: 105px;
  border-radius: 45%;
  background: linear-gradient(to bottom,#3CDE92, #3B92B7);
  transform: translateX(120px);
}
.bola {
  position: absolute;
  width: 105px;
  height: 105px;
  border-radius: 50%;
  background: linear-gradient(to bottom,#3CDE92, #3B92B7);
  transform: translateX(-120px);
}
<div class="bola"></div>

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

<div class="controle"></div>

2
  • Caramba, se puxou com essa opção 1! Commented 20/12/2018 às 12:13
  • @fernandosavio aqui o bagulho é loko! 🔪💀
    – hugocsl
    Commented 20/12/2018 às 12:17

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .