<div></div>
<div></div>
@import 'compass/css3';

\$d: 49vmin;

// \$n: number of vertices/ edges (integer)
// \$oa: offset angle (angle)
@mixin reg-poly(\$n: 3, \$oa: -90deg) {
\$ba: 360deg/\$n;
\$p: ();

@for \$i from 0 to \$n {
\$ca: \$i*\$ba + \$oa;
\$x: 50%*(1 + cos(\$ca));
\$y: 50%*(1 + sin(\$ca));
\$p: \$p, \$x \$y
}

// avoid prefixing repetition
--points: #{\$p};
-webkit-clip-path: polygon(var(--points));
clip-path: polygon(var(--points))
}

// \$n: number of star points (integer)
// \$f: star factor (number - between 0 and 1 for a star)
// \$oa: offset angle (angle)
@mixin star-shape-poly(\$n: 3, \$f: .5, \$oa: -90deg) {
\$m: 2*\$n;
\$ba: 360deg/\$m;
\$rr: \$f*cos(\$ba);
\$p: ();

@for \$i from 0 to \$m {
\$ca: \$i*\$ba + \$oa;
\$cr: if(\$i%2 == 0, 1, \$rr);
\$x: 50%*(1 + \$cr*cos(\$ca));
\$y: 50%*(1 + \$cr*sin(\$ca));
\$p: \$p, \$x \$y
}

// avoid prefixing repetition
--points: #{\$p};
-webkit-clip-path: polygon(var(--points));
clip-path: polygon(var(--points))
}

div {
display: inline-block;
width: \$d; height: \$d;
background: orange;
@include reg-poly(8, 15deg);

&:nth-child(2) { @include star-shape-poly(14, .85, 5deg) }
}