Page Widget How to - Create full Circle, half circle, quarter circle








Question

We would like to know how to create full Circle, half circle, quarter circle.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.full-circle {<!--from   w w  w.  jav a2  s  . c om-->
  background-color: #DDD;
  height: 150px;
  width: 150px;
  -webkit-border-radius: 75px;
  -moz-border-radius: 75px;
}

.circle-border {
  background-color: #EEE;
  border: 3px solid #000;
  height: 150px;
  width: 150px;
  -webkit-border-radius: 75px;
  -moz-border-radius: 75px;
}

.transparent-circle {
  background-color: rgba(222, 0, 102, 0);
  border: 3px solid #000;
  height: 150px;
  width: 150px;
  -webkit-border-radius: 75px;
  -moz-border-radius: 75px;
}

.half-circle {
  background-color: #CCC;
  height: 150px;
  width: 75px;
  -moz-border-radius: 150px 0 0 150px;
  border-radius: 150px 0 0 150px;
}

.quarter-circle {
  background-color: #AAA;
  height: 150px;
  width: 150px;
  -moz-border-radius: 150px 0 0 0;
  border-radius: 150px 0 0 0;
}
</style>
</head>
<body>
  <p class="full-circle"></p>
  <p class="circle-border"></p>
  <p class="transparent-circle"></p>
  <p class="half-circle"></p>
  <p class="quarter-circle"></p>
</body>
</html>

The code above is rendered as follows: