7

Estou tentando fazer essa forma. Repare como um círculo parece passar por dentro do outro...

inserir a descrição da imagem aqui

Porem não estou conseguindo fazer um elemento "passar por dentro do outro" com CSS, é possível chegar nessa forma apenas CSS? Tipo dois arcos entrelaçados?

Segue até onde consegui chegar.

.box {
  width: 200px;
  height: 200px;
  box-sizing: border-box;
  position: absolute;
  border-radius: 50%;
  border: 20px solid tomato;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, .75);
}
.box.y {
  left: 100px;
} 
<div class="box x"></div>
<div class="box y"></div>

2
  • Mas tu também nunca facilita né?! Tô só esperando a edição da pergunta adicionando a frase "Sem SVG por favor" Commented 15/01/2019 às 13:55
  • @fernandosavio quer moleza? Senta no pudim! :D
    – hugocsl
    Commented 15/01/2019 às 13:57

1 Resposta 1

9

Com ::before e ::after apenas na primeira div você consegue:

.container{
  position: relative;
}

.box, .box.x::before, .box.x::after {
  width: 200px;
  height: 200px;
  box-sizing: border-box;
  position: absolute;
  border-radius: 50%;
  border: 20px solid tomato;
}

.box.x::before, .box.x::after{
   content: '';
   top: -20px;
}

.box.x::before{
   left: -20px;
   border-bottom-color: transparent;
   z-index: inherit;
}

.box.x, .box.x::after{
   box-shadow: 0 0 15px 0 rgba(0, 0, 0, .75);
}

.box.x::after{
   left: 80px;
   border-top-color: transparent;
}

.box.x {
   z-index: 20;
} 

.box.y {
   left: 100px;
}
<div class="container">
   <div class="box x"></div>
   <div class="box y"></div>
</div>

A ideia é que a div.x tenha um z-index maior do que a div.y e o ::before fique por cima com a borda inferior transparente para que a borda do ::after passe por cima. A mesma coisa com o ::after, só que com a borda superior transparente.

A sombra (box-shadow) apliquei somente na div.x e no seu ::after, porque, como o ::after fica por cima da div.y, essa div não precisa da sombra.

Questão da sombra

Tive que criar um pseudo ::before na div.y e alterar a sombra para inset na pseudo ::before da div.x e usar duas sombras, uma inset e outra outset (padrão) na pseudo ::after da div.x:

.container{
  position: relative;
}

.box, .box.x::before, .box.x::after, .box.y::before{
  width: 200px;
  height: 200px;
  box-sizing: border-box;
  position: absolute;
  border-radius: 50%;
  border: 20px solid tomato;
  background-color: transparent;
}

.box.x::before, .box.x::after, .box.y::before{
   content: '';
   top: -20px;
}

.box.x::before{
   left: -20px;
   border-bottom-color: transparent;
   z-index: inherit;
   box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, .75);
}

.box.x, .box.x::after{
   box-shadow: 0 0 15px 0 rgba(0, 0, 0, .75);
}

.box.x::after{
   left: 80px;
   border-top-color: transparent;
   box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, .75), 0 0 15px 0 rgba(0, 0, 0, .75);
}

.box.y::before{
   left: -20px;
   z-index: 20;
   border-top-color: transparent;
}

.box.x {
   z-index: 20;
} 

.box.y {
   left: 100px;
}
<div class="container">
   <div class="box x"></div>
   <div class="box y"></div>
</div>

8
  • Muito bom Sam chegou a 90%, só que o elemento tem uma sombra total, tipo para todos os lados, repara la na intercessão das imagens e repara como é a sombra entre os elementos
    – hugocsl
    Commented 15/01/2019 às 15:39
  • Na sombra do seu exemplo do código só tem sombra pra fora.
    – Sam
    Commented 15/01/2019 às 15:55
  • 1
    +1. Acho que é só mudar as sombras pra dar impressão que está em cima: .box.x { box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .75) inset } .box.x::after { box-shadow: 0 0 15px 0 rgba(0, 0, 0, .75) }: i.imgur.com/AouI9Jc.png Commented 15/01/2019 às 16:02
  • Sim Sam, não tem porque eu não consegui fazer. Mas a intenção é deixar igual a imagem de referência como eu comentei na pergunta. É um detalhe que ao meu ver faz diferença, pois da mais profundidade no "entrelaçado" dos elementos. A intenção como falei era chegar na forma da imagem, como eu não consegui chegar lá deixei a pergunta aqui.... apesar disso ficou muito bom, como já tinha falado.
    – hugocsl
    Commented 15/01/2019 às 16:09
  • 1
    Estou impressionado com suas skills, ficou ótimo. Commented 15/01/2019 às 21:01

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 .