%p 使用clip-path (单个元素):
%div.clippaths
  -(1..10).each do |i|
    %div.polygon
View Compiled
@mixin clip-polygon($num, $color, $radius: 64px) {
  position: relative;
  width: $radius*2;
  height: $radius*2;
  background: $color;
  $points: ();
  @for $i from 0 to $num {
    $angle: 360deg/2/$num + 360deg / $num * $i;
    $pointX: 50% + sin($angle)*50%;
    $pointY: 50% + cos($angle)*50%;
    $points: append($points, unquote($pointX+" "+$pointY), "comma");
  }
  clip-path: polygon(#{$points});
}

/* styles */
html {
  min-height: 100%;
}
body {
  margin: 0;
  background: rgba(0,0,0,.75);
  text-align: center;
  height: 100vh;
}
p {
  margin: 0;
  padding: 1em;
  font-size: 18px;
  font-weight: 700;
  font-family: sans-serif;
  color: #fff;
}
.polygon::after {
  font: 32px sans-serif;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  color: #fff;
}
.polygon {
  display: inline-block;
  width: 128px;
  height: 128px;
}

$maxNum: 10;
@for $i from 1 through $maxNum {
  $num: $i + 2;
  .polygon:nth-of-type(#{$i})::after {
    content: "#{$num}";
  }
  .clippaths .polygon:nth-of-type(#{$i}) {
    @include clip-polygon($num, #c00);
  }
}

External CSS

  1. https://www.w3cplus.com/sites/default/files/blogs/2016/1607/mathsass/math.

External JavaScript

This Pen doesn't use any external JavaScript resources.