Skip to main content
adicionou 1567 caracteres ao conteúdo
Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 128

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>

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>

removeu 27 caracteres do conteúdo
Fonte Link
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;
   box-shadow: none;
} 
<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.

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;
   box-shadow: none;
} 
<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.

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.

Fonte Link
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;
   box-shadow: none;
} 
<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.