%div.clippaths
  -(1..10).each do |i|
    %div.polygon
View Compiled
$numPoints: 10;

@function polygon($points, $startPoint: 0) {
	$angle: (360deg / $points);
	$coords: '';

	@for $point from $startPoint through ($points + $startPoint - 1) {

		$pointAngle: $angle * $point;

		$x: 50% + (percentage(sin($pointAngle)) / 2);
		$y: 50% - (percentage(cos($pointAngle)) / 2);

		$coords: $coords + $x + ' ' + $y;


		@if $point != $points + $startPoint - 1 {
			$coords: $coords + ', ';
		}

		$point: $point + 1;

	}

	$polygon: 'polygon(' + $coords + ')';

	@return unquote($polygon);
}

html {
	background: #333;
	text-align: center;
}
.clippaths {
	padding: 10px;
}
.polygon {
	width: 128px;
	height: 128px;
	vertical-align: middle;
	margin: 5px;
	display:inline-block;
	background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/30285/pineapple.jpg);
	background-size: cover;
	position: relative;
	
	&::after {
	  font: 32px sans-serif;
	  position: absolute;
	  left: 50%;
	  top: 50%;
	  transform: translate(-50%,-50%);
	  color: #000;
	}
}


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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.