Multi-colored Circle

Tutorials of (Multi-colored circle) by Scot favorite

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


  <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>
/* Downloaded from */
#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 */

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

2018 © Scot Favorite