Multi-colored Circle

Tutorials of (Multi-colored circle) by Scot favorite

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Multi-colored Circle</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div id="circle-container">
   <div class="quarter top-left"></div>
   <div class="quarter top-right"></div>
   <div class="quarter bottom-left"></div>
   <div class="quarter bottom-right"></div>
</div>
  
  
</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
#circle-container {
   width: 100px;
   height: 100px
}

.quarter {
   width: 50px;
   height: 50px
}

.top-left {
   border-top-left-radius: 50px;
   background: #09f;
   float: left
}

.top-right {
   border-top-right-radius: 50px;
   background: #666;
   float: right
}

.bottom-left {
   border-bottom-left-radius: 50px;
   background: #aaa;
   float: left
}

.bottom-right {
   border-bottom-right-radius: 50px;
   background: #333;
   float: right
}
/* Downloaded from https://www.codeseek.co/ */

This awesome code ( Multi-colored Circle ) is write by Scot Favorite, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Scot Favorite