@shape
Clip the cell to one of the built-in shapes. A shorthand for clip-path with the
@shape function.
Syntax
- @shape: <name> [<k>]
- name
-
circle,triangle,pentagon,hexagon,octagon,star,infinity,heart,fish,whale,drop,bean,bicorn,vase,windmill,clover,hypocycloid,bud. - k
-
The number of lobes for
clover(3 to 5),hypocycloid(3 to 5) andbud(3 to 10).
The property only takes preset names. For shapes described by equations use the @shape() function.
Examples
@grid: 5 / 60vmin _2px;
@shape: @p(circle, star, heart, hexagon);
background: #000;@grid: 2x1
~ 1px
* 5deg
/ 60vmin
/ @doodle(@shape: vase; background: #000)
50% 100% / 36% 50% no-repeat;
background: #000;
animation: @pn(none, r 2s ease infinite);
@place: @pn(50%, 50% 2.5em);
@size: @pn(2px calc(100% - 5em), 20%);
@shape: @pn(none, windmill);
@keyframes r { to { rotate: 360deg } }