Create doughnut shape in CSS [duplicate]

Answer 1

This shape can also be drawn with css3 radial-gradient():

div {
  background: radial-gradient(circle, transparent 40%, purple 40%);
}

body {
  background: linear-gradient(orange, red) no-repeat;
  min-height: 100vh;
  margin: 0;
}

div {
  background: radial-gradient(circle, transparent 40%, purple 40%);
  border-radius: 100%;
  height: 300px;
  width: 300px;
  margin: 25px;
}