css hand torn Olympic rings

With the Paris Olympics in full swing, this article uses CSS to draw an Olympic ring. The five Olympic rings are interconnected and therefore visually overlap, which is the most challenging part of realizing them. Next, we'll use CSS pseudo-elements to cleverly achieve the interlocking rings effect!

Based on the positional characteristics of the five rings, you can set the black ring in the middle as the parent element of the HTML and the other colored rings as child elements. In this way, the other rings can be positioned relative to the black ring. The overall HTML structure is as follows:

<div class="black">
  <div class="ring blue"></div>
  <div class="ring yellow"></div>
  <div class="ring green"></div>
  <div class="ring red"></div>
</div>

First, use the CSS border to draw the basic styles for the black ring and the other four rings:

.black {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border-width: 20px;
  border-style: solid;
}

.ring {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border-width: 20px;
  border-style: solid;
  top: -20px;
  right: -20px;
}

Next draw the green ring, which is positioned relative to the black ring, moving down to the right and in a higher level than the black ring:

.green {
  color: #30a751;
  top: 70px;
  right: -125px;
  z-index: 2;
}

The effect at this point looks like this, with the black ring of thez-indexis 1, the green ring ofz-indexFor 2:

And we want the black ring to be on top at the intersection point to the right of the two rings, which can be accomplished using a pseudo-element. Add a pseudo-element of the same size as the black ring::after, and place it directly above the black ring.z-indexbecause of3. Next, by setting the right border of the pseudo-element to black and the other directions to transparent, you have successfully made the right side of the black ring appear to be above the green ring:

 
.black {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border-width: 20px;
  border-style: solid;

  &::after {
    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 100%;
    top: -20px;
    right: -20px;
    border: 20px solid transparent;
    border-right: 20px solid currentcolor;
    z-index: 3;
  }
}

Here I'll move the position of this pseudo-element to the right to see what he looks like:

By this point you should have realized that this is just a visual loop here; in reality, the two loops are not on the same level.

Draw the red ring next. Since the green ring ofz-indexbecause of2, so the red ring is located below the green ring:

.red {
  color: #ef314e;
  right: -230px;
}

.red {
  color: #ef314e;
  right: -230px;

  &::after {
    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border-width: 20px;
    border-style: solid;
    top: -20px;
    right: -20px;
    border: solid 20px transparent;
    border-bottom: solid 20px currentcolor;
    z-index: 2;
  }
}

The overall code is as follows:

 
.black {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border-width: 20px;
  border-style: solid;

  &::after {
    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 100%;
    top: -20px;
    right: -20px;
    border: 20px solid transparent;
    border-right: 20px solid currentcolor;
    z-index: 3;
  }

  &::before {
    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 100%;
    top: -20px;
    right: -20px;
    border: 20px solid transparent;
    border-bottom: 20px solid currentcolor;
    z-index: 1;
  }

  .ring {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border-width: 20px;
    border-style: solid;
    top: -20px;
    right: -20px;
  }

  .green {
    color: #30a751;
    top: 70px;
    right: -125px;
    z-index: 2;
  }

  .red {
    color: #ef314e;
    right: -230px;

    &::after {
      content: "";
      position: absolute;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      border-width: 20px;
      border-style: solid;
      top: -20px;
      right: -20px;
      border: solid 20px transparent;
      border-bottom: solid 20px currentcolor;
      z-index: 2;
    }
  }


  .yellow {
    color: #fcb32e;
    top: 70px;
    left: -125px;
  }

  .blue {
    color: #0082c9;
    left: -230px;

    &::after {
      content: "";
      position: absolute;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      border-width: 20px;
      border-style: solid;
      top: -20px;
      right: -20px;
      border: solid 20px transparent;
      border-right: solid 20px currentcolor;
      z-index: 2;
    }
  }
}

The final result is as follows:

Thanks for reading, and remember to give it a like...here, thanks guys!!!!