Stu Nicholls | CSS PLAY | CSS superellipse four leaf clover

Date : 29th November 2025

For Edge, Chrome and Opera at the moment

HTML

</div>

CSS

#clover {width:50%; max-width:180px; aspect-ratio:24/21; margin:50px auto; position:relative;}
.petals {width:100%; height:100%; position:absolute; left:0; top:0; transform-origin: 50% 100%;}

.shapex {width:50%; height:100%; background: radial-gradient(ellipse at 40% 30%,  #3f6e1d 0%, #83de27 0%,  #3f6e1d 100%);
 position:absolute; left:50%; top:0; border:1px solid #8a1;
 clip-path: shape(from 50% 0, curve to 67% 50% with 135% 0, line to 0 100%, line to 0 8%, curve to 35% 0% with 0% 0,)
}

:nth-child(1 of .shapex) {transform: rotateY(180deg);
transform-origin: 0% 0%;}

:nth-child(1 of .petals) {rotate:43deg; filter: drop-shadow(5px 5px 5px #888);}
:nth-child(2 of .petals) {rotate:130deg; filter: drop-shadow(5px -5px 5px #888);}
:nth-child(3 of .petals) {rotate:-130deg; filter: drop-shadow(-5px -5px 5px #888);}
:nth-child(4 of .petals) {rotate:-43deg; filter: drop-shadow(-5px 5px 5px #888);}
  
#stem {width:14%; height:150%; border:1px solid #8a1; position:absolute; left:38%; top:100%; z-index:-1; filter: drop-shadow(-5px -5px 5px #888);
border-radius:80% 0% 80% 100% / 110% 0% 100% 10%;
corner-shape:  superellipse(-0.4) square superellipse(0.4) square;
background: linear-gradient(to right, #cfea5b, #809130, #cfea5b);
}

Information

Having more fun with the latest CSS style corner-shape:superellipse().

This is a four leaf clover with the petal shape formed using superellipse() and curves on a triangular shape. folded to produce a 'heart' shape and rotated around a center point.

See Corner-shape for more information.
See Superellipse() for more information.

Please consider making a donation, every little helps.

CSS PLAY

Doing It With Style

DEMOS › CSS more fun with corner-shape and clip-path:shape()

Date : 29th November 2025

For Edge, Chrome and Opera at the moment

Information