Skip to main content
2 de 3
removeu 27 caracteres do conteúdo
Sam
  • 80,8mil
  • 22
  • 73
  • 128

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.

Sam
  • 80,8mil
  • 22
  • 73
  • 128