<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) }
}