JSFiddle - React, Tailwind, and code Playground

Конический градиент

by Ankhena

HTML

<div class=cone></div>

CSS

* {
  box-sizing: border-box
}

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

.cone{
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: 
  radial-gradient(#fff 50%, transparent 50.5%),
  conic-gradient(red 0, red 4deg, orange 5deg, orange 9deg, transparent 10deg, transparent 14deg,
  orange 15deg, orange 19deg, transparent 20deg, transparent 24deg,
  orange 25deg, orange 29deg, transparent 30deg, transparent 35deg,
  orange 35deg, orange 39deg, transparent 40deg, transparent 45deg,
  orange 45deg, orange 49deg, transparent 50deg, transparent 55deg,
  orange 55deg, orange 59deg, transparent 60deg, transparent 65deg,
  orange 65deg, orange 69deg, transparent 70deg, transparent 75deg,
  orange 75deg, orange 79deg, transparent 80deg, transparent 85deg,
  orange 85deg, orange 89deg, transparent 90deg, transparent 95deg,
  orange 95deg, orange 99deg, transparent 100deg, transparent 105deg,
  orange 105deg, orange 109deg, transparent 110deg, transparent 115deg,
  orange 115deg, orange 119deg, transparent 120deg, transparent 125deg,
  
  gray 125deg, gray 129deg, transparent 130deg, transparent 135deg,
  gray 135deg, gray 139deg, transparent 140deg, transparent 145deg,
  gray 145deg, gray 149deg, transparent 150deg, transparent 155deg,
  gray 155deg, gray 159deg, transparent 160deg, transparent 165deg,
  gray 165deg, gray 169deg, transparent 170deg, transparent 175deg


  
  );
}