<svg width='0' height='0'>
  <defs>
    <clipPath id='cp' clipPathUnits='objectBoundingBox'>
      <path d=''/>
    </clipPath>
  </defs>
</svg>

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

@import "compass/css3";

.clip-me {
  width: 300px; height: 300px;
  background: #222;
  clip-path: url(#cp);
}

var n = 3, 
    base_angle = 2*Math.PI/n, 
    r_outer = .5, 
    r_inner = .4, 
    offset_x = .5, 
    offset_y = .5, 
    points_outer = '', 
    points_inner = '', 
    angle, x, y;

for(var i = 0; i <= n; i++) {
  angle = i*base_angle;
  x = Math.cos(angle);
  y = Math.sin(angle);
  
  points_outer += ((i === 0)?'M':' L') + 
    (offset_x + r_outer*x).toFixed(3) + ', ' + 
    (offset_y - r_outer*y).toFixed(3);
  points_inner += ' L' + 
    (offset_x + r_inner*x).toFixed(3) + ', ' + 
    (offset_y + r_inner*y).toFixed(3);
}

document.querySelector('#cp path').setAttribute('d', points_outer + points_inner + 'z');