Как сделать сегмент пончика в HTML5, используя только CSS

#html #css #css3 #svg

Как сделать эту фигуру, используя только CSS 



То, что я пробовал:  



.button-up {
  border-top: 100px solid red;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  border-bottom: 35px solid transparent;
  width: 200px;
}




    

Ответы

Ответ 1

Вариант попроще:



.block {
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  border: 4rem solid transparent;
  border-top-color: green;
}



Ответ 2

Я бы использовал  линейный / радиальный градиент следующим образом:  



.box {
  width:200px;
  height:200px;
  border-radius:50%;
  background:
  linear-gradient(-30deg, white 50%,transparent 0),
  linear-gradient(30deg, white 50%,transparent 0),
  radial-gradient(circle at center,transparent 31%,blue 30%,blue 100%, transparent 51%);
}







И с border: 



.box {
  width:200px;
  height:200px;
  border-radius:50%;
  background:
  linear-gradient(to top,white 59%,transparent 0),
  linear-gradient(-30deg, white calc(50% - 4px),green calc(50% - 4px),green 50%,transparent 0),
  linear-gradient(30deg, white calc(50% - 4px),green calc(50% - 4px),green 50%,transparent 0),
  radial-gradient(circle at center,transparent calc(30% - 4px),green calc(30% - 4px),green
30%,blue 30%,blue calc(70% - 3px),green 0);
}







Вы также можете рассмотреть решение с SVG, которое может быть проще:








Вот еще одна идея с clip-path:



.box {
  width:200px;
  height:200px;
  border-radius:50%;
  background:
  radial-gradient(circle at center,transparent 31%,blue 30%,blue 100%, transparent 51%);
  -webkit-clip-path: polygon(0 0, 50% 50%, 100% 0);
clip-path: polygon(0 0, 50% 50%, 100% 0);
}