Circle operations

circle,circle with border, 4color, doughnut, semi, quarter, concentric, circle inside circle ,

by aanita0309

HTML

<div>
  <table>
    <tr>
      <td>
        <div class="cir"></div>
      </td>
      <td>
        <div class="cirWithBorder"></div>
      </td>
      <td>
        <div class="cirWith4Color"></div>
      </td>
      <td>
        <div class="doughnut"></div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="semiCir"></div>
      </td>
      <td>
        <div class="quarterCir"></div>
      </td>
      <td>
        <div class="concentricCir"></div>
      </td>
     </tr>
  </table>
</div>

CSS

.cir {
  width: 100px;
  height: 100px;
  background-color: green;
  border-radius: 50%;
}

.cirWithBorder {
  width: 100px;
  height: 100px;
  background-color: white;
  border-radius: 50%;
  border: 5px solid red;
}

.cirWith4Color {
  width: 100px;
  height: 100px;
  border-width: 50px;
  border-style: solid;
  border-color: red yellow blue green;
  border-radius: 50%;
  box-sizing:border-box;
  /*The box-sizing property allows us to include the    padding and border in an element's total width and height.*/
}

.doughnut {
  width: 100px;
  height: 100px;
  border-width: 50px;
  border-style: solid;
  border-color: red;
  border-radius: 50%;
 }

.semiCir{
  width: 100px;
  height: 50px;
  background:black;
  border-top-left-radius:50% 100%;
  border-top-right-radius:50% 100%;
 /* border-bottom-right-radius:10px solid black;
  border-bottom-left-radius:10px solid black;*/
  
}

.quarterCir{
  width: 50px;
  height: 50px;
  background:black;
  border-top-left-radius:100%;
 /*  border-top-right-radius:50% 100%;
  border-bottom-right-radius:10px solid black;
  border-bottom-left-radius:10px solid black;*/
  
}

.concentricCir{
 position:relative;
 width:100px;
  height:100px;
  background:white;
  border: 20px solid blue; 
   border-radius:50%;
}

 .concentricCir:before, .concentricCir:after{
  border-radius:50%;
   position:absolute;
    content:'';
    top:50%;
    left:50%;
    transform:translate(-50% ,-50%);
}
.concentricCir:before{
  width:50%;
  height:50%;
  background:red;
  
}

.concentricCir:after{
  width:30%;
  height:30%;
  background:green;
  
}