どうも！LSSです！！
実用性はまったく無いと思いますが…CSSのbackgroundプロパティで「チョコレートケーキ」を描いてみました。
チョコレートケーキ
コード
<div style="
box-sizing: content-box;
width: 100px;
height: 100px;
background:
conic-gradient(from 60deg at 13px 50px,#372006 29.9deg,#37200600 30deg) -13px 0px
, radial-gradient(100px 100px at -86px 100px,#372006 99%,#37200600 100%) 86px -50px
, linear-gradient(180deg,#2c120700 48%,#2c1207 52% 63%,#85660f 64% 72%,#2c1207 73% 82%,#85660f 83% 90%,#2c1207 91%) 0px 0px;
text-shadow: 1px 1px 0 #ffffff;
">ChocoCake</div>
3つのgradientを重ねています
位置が分かるように枠線で囲み、３つのgradientを個別に描くと↑のようになります。
左から、conic-gradient、radial-gradient、linear-gradient と３種類のgradientをフル活用！
conicの「右にスキマがある」のや、radialの「円の右上だけを切り出したような」のは、まず「at」で中心位置をずらして描画。
↑conicのほうは「at 13px 50px」、radialは「at -86px 100px」で描きました。
そして、今度は描画位置をずらす事で、
の位置に持っていっています。
コードでいうと、↓この部分
background:
conic-gradient(from 60deg at 13px 50px,#372006 29.9deg,#37200600 30deg) -13px 0px
, radial-gradient(100px 100px at -86px 100px,#372006 99%,#37200600 100%) 86px -50px
（青文字部分は「background-position」と同じ指定です。）
あとがき
以前からちょこちょこ使っていましたが、conic-gradientやradial-gradientについては「at で中心位置を指定してから、background-positionで実際の配置を調節する」事で、部分的に切り出したような表現が使えます^^
これを使いこなせると、CSSお絵描きの幅がとても広がりますね！
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
