<!-- 
  Original pen by @Jon Kantner
  https://codepen.io/jkantner/pen/gKaRjx
-->
<div class="parasol"></div>

:root {
  --r: rgb(255,40,40);
	--rT: rgba(255,40,40,0);

	--w: rgb(240,240,240);
	--wT: rgba(240,240,240,0);

	--o: rgb(255,180,70);
	--oT: rgba(255,180,70,0);

	--do: rgb(232,144,0);
	--doT: rgba(232,144,0,0);
}

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.parasol {
  background:
      // 雨伞伞布
      radial-gradient(100% 200% at 50% 100%, var(--r) 50%, var(--rT) 50.25%) 50% 1.5em / 9em 12em,
    radial-gradient(100% 200% at 50% 100%, var(--w) 50%, var(--wT) 50.25%) 50% 1.5em / 21em 12em,
    radial-gradient(100% 200% at 50% 100%, var(--r) 50%, var(--rT) 50.25%) 50% 1.5em / 30em 12em,
    
      // 雨伞伞布边缘的弧形
			radial-gradient(105% 200% at 50% 100%, var(--rT) 49%, var(--r) 50%) 0 13.5em / 4.5em 3em,
			radial-gradient(105% 200% at 50% 100%, var(--wT) 49%, var(--w) 50%) 4.5em 13.5em / 6em 3em,
			radial-gradient(105% 200% at 50% 100%, var(--rT) 49%, var(--r) 50%) 50% 13.5em / 9em 3em,
			radial-gradient(105% 200% at 50% 100%, var(--wT) 49%, var(--w) 50%) 19.5em 13.5em / 6em 3em,
			radial-gradient(105% 200% at 50% 100%, var(--rT) 49%, var(--r) 50%) 25.5em 13.5em / 4.5em 3em,
    
      // 雨伞伞把
			// 1
			radial-gradient(200% 200% at 100% 100%, var(--do) 49%, var(--doT) 50%) 14em 0 / 1em 1em,
			radial-gradient(200% 200% at 0% 100%, var(--o) 49%, var(--oT) 50%) 15em 0 / 1em 1em,
			// 2
			linear-gradient(90deg, var(--do) 50%, var(--o) 50%) 14em 1em / 2em 25em,
			// 3
			radial-gradient(100% 200% at 50% 0, var(--oT) 0.95em, var(--o) 1em, var(--o) 1.95em, var(--do) 2em, var(--do) 2.95em, var(--doT) 3em) 14em 26em / 6em 3em,
			// 4
			radial-gradient(200% 200% at 100% 100%, var(--o) 49%, var(--oT) 50%) 18em 25em / 1em 1em,
			radial-gradient(200% 200% at 0% 100%, var(--do) 49%, var(--doT) 50%) 19em 25em / 1em 1em;
  
  background-repeat: no-repeat;
  font-size: 10px;
  width: 30em;
  height: 29em;
}