<div class='clip-me'></div>

@import 'compass/css3';

$n: 3;
$base-angle: 360deg/$n;
$r-outer: 150px;
$r-inner: 120px;
$offset-x: 50%;
$offset-y: 50%;
$points-inner: ();
$points-outer: ();

@for $i from 0 through $n {
  $points-outer: append(
    /* list of points for the outer polygon*/
    $points-outer, 

    /* x coordinate of current outer vertex */
    calc(#{$offset-x} + #{$r-outer*cos(-$i*$base-angle)}) 

    /* y coordinate of current outer vertex */
    calc(#{$offset-y} + #{$r-outer*sin(-$i*$base-angle)}), 
  
    comma) !global;

  $points-inner: append(
    /* list of points for the inner polygon*/
    $points-inner, 

    /* x coordinate of current inner vertex */
    calc(50% + #{$r-inner*cos($i*$base-angle)}) 

    /* y coordinate of current inner vertex */
    calc(50% + #{$r-inner*sin($i*$base-angle)}), 
  
    comma) !global;
}

.clip-me {
  width: 300px; height: 300px;
  background: #222;
  clip-path: polygon(
    join($points-outer, $points-inner)
  );
}