Others


Others


How to create Olympics logo using HTML and CSS


To create the interlocking effect of the rings, four of the rings have transparent borders in specific directions. This code is a simple representation of the Olympic rings logo for educational purposes.

The following example shows, how to create olympics logo using html and css.

Example : index.html 
<!DOCTYPE html>
<html>
  <head>
    <title>How to create Olympics Logo using HTML and CSS</title>
    <style>
      .logo{
        width:700px;
        height:350px;
        position:relative;
        margin:auto;
      }
      .ring{
        height:180px;
        width:180px;
        border-radius:50%;
        position:absolute;
      }
      
      .blue{
        border:18px solid #0185c7;
        left:10px;
        top:10px;
      }
      
      .yellow{
        border:18px solid #f6c300;
        left:130px;
        top:120px;
      }
      
      .black{
        border:18px solid #000000;
        left:245px;
        top:10px;
      }
      
      .green{
        border:18px solid #009f3d;
        left:365px;
        top:120px;
      }
      
      .red{
        border:18px solid #e00025;
        left:480px;
        top:10px;
      }
      
      .border-bottom-transparent{
        border-bottom-color:transparent;
      }
      
      .border-left-transparent{
        border-left-color:transparent;
      }
      
      .border-top-transparent{
        border-top-color:transparent;
      }
      
    </style>
  </head>
  <body>
    <div class='logo'>
      <div class='ring blue'></div>
      <div class='ring black'></div>
      <div class='ring red'></div>
      <div class='ring yellow'></div>
      <div class='ring green'></div>
      
      <div class='ring blue border-bottom-transparent'></div>
      <div class='ring black border-left-transparent'></div>
      <div class='ring green border-top-transparent'></div>
      <div class='ring red border-left-transparent'></div>
    </div>
  </body>
</html>
Try it Yourself
Live Demo