<div class="center-text">
		  <p>Below is the original image, which is a square.</p>
  <img src="http://karenmenezes.com/shapes-polygon/image.jpg" alt="demo-clip-path" width="400"></div>	
		
		<p class="center-text">Hover over the images below to see the original aspect ratio.</p>
		<div class="polygon-each">	
		  	<div class="polygon-each-img-wrap">
				  <img src="http://karenmenezes.com/shapes-polygon/image.jpg" alt="demo-clip-rhombus" class="polygon-clip-rhombus">			
			  </div>
        <h4>Rhombus</h4>
        <p>All 4 sides of a rhombus are of equal length. Opposite sides are parallel and opposite angles are equal.</p>
        <p><em>Polygon > Quadrilateral > Parallelogram > Rhombus</em></p>
        <svg class="clip-svg">
          <defs>
            <clipPath id="polygon-clip-rhombus" clipPathUnits="objectBoundingBox">
              <polygon points="0.5 0, 1 0.5, 0.5 1, 0 0.5" />
            </clipPath>
          </defs>
        </svg>			
    </div>

		<div class="polygon-each">	
			<div class="polygon-each-img-wrap">
				<img src="http://karenmenezes.com/shapes-polygon/image.jpg" alt="demo-clip-square" class="polygon-clip-square">
			</div>
			<h4>Square</h4>
			<p>All 4 sides of a square are of equal length and each angle is a right angle. A square is also a rhombus or a rectangle.</p>
			<p><em>Polygon > Quadrilateral > Parallelogram > Rectangle / Rhombus > Square</em></p>
			<svg class="clip-svg">
				<defs>
					<clipPath id="polygon-clip-square" clipPathUnits="objectBoundingBox">
						<polygon points="0.1 0.1, 0.9 0.1, 0.9 0.9, 0.1 0.9" />
					</clipPath>
				</defs>
			</svg>	
		</div>

		<div class="polygon-each">	
			<div class="polygon-each-img-wrap">
				<img src="http://karenmenezes.com/shapes-polygon/image.jpg" alt="demo-clip-rectangle" class="polygon-clip-rectangle">
			</div>
			<h4>Rectangle</h4>
			<p>A parallelogram with 4 right angles, that are of equal length. The angles are equal where the pairs meet.</p>
			<p><em>Polygon > Quadrilateral > Parallelogram > Rectangle</em></p>
			<svg class="clip-svg">
				<defs>
					<clipPath id="polygon-clip-rectangle" clipPathUnits="objectBoundingBox">
						<polygon points="0.1 1, 0.1 0, 0.9 0, 0.9 1" />
					</clipPath>
				</defs>
			</svg>	
		</div>

		<div class="polygon-each">	
			<div class="polygon-each-img-wrap">
				<img src="http://karenmenezes.com/shapes-polygon/image.jpg" alt="demo-clip-rhomboid" class="polygon-clip-rhomboid">
			</div>	
			<h4>Rhomboid</h4>
			<p>A parallelogram that is neither a rhombus (since its adjacent sides are of unequal lengths) nor a rectangle (since its angles are not right angled).</p>
			<p><em>Polygon > Quadrilateral > Parallelogram > Rhomboid</em></p>
			<svg class="clip-svg">
				<defs>
					<clipPath id="polygon-clip-rhomboid" clipPathUnits="objectBoundingBox">
						<polygon points="0 1, 0.3 0, 1 0, 0.7 1" />
					</clipPath>
				</defs>
			</svg>	
		</div>

		<div class="polygon-each">	
			<div class="polygon-each-img-wrap">
				<img src="http://karenmenezes.com/shapes-polygon/image.jpg" alt="demo-clip-kite" class="polygon-clip-kite">
			</div>
			<h4>Kite</h4>
			<p>A kite has two pairs of adjacent sides that are of equal length. The angles are equal where the pairs meet. Sometimes, if a kite meets certain requirements, it could also be a rhombus or a square.</p>
			<p><em>Polygon > Quadrilateral > Kite</em></p>
			<svg class="clip-svg">
				<defs>
					<clipPath id="polygon-clip-kite" clipPathUnits="objectBoundingBox">
						<polygon points="0.5 0, 1 0.3, 0.5 1, 0 0.3" />
					</clipPath>
				</defs>
			</svg>	
		</div>

		<div class="polygon-each">	
			<div class="polygon-each-img-wrap">
				<img src="http://karenmenezes.com/shapes-polygon/image.jpg" alt="demo-clip-trapezoid" class="polygon-clip-trapezoid">
			</div>
			<h4>Trapezoid</h4>
			<p>At least one pair of opposite sides is parallel. Some definitions say that only one pair of opposite sides must be parallel.</p>
			<p><em>Polygon > Quadrilateral > Trapezoid</em></p>
			<svg class="clip-svg">
				<defs>
					<clipPath id="polygon-clip-trapezoid" clipPathUnits="objectBoundingBox">
						<polygon points="0.3 1, 0.3 0, 0.6 0, 1 1" />
					</clipPath>
				</defs>
			</svg>	
		</div>

		<div class="polygon-each">	
			<div class="polygon-each-img-wrap">
				<img src="http://karenmenezes.com/shapes-polygon/image.jpg" alt="demo-clip-trapezoid-isosceles" class="polygon-clip-trapezoid-isosceles">
			</div>
			<h4>Isosceles Trapezoid</h4>
			<p>A trapezoid that also has its base angles equal in measure.</p>
			<p><em>Polygon > Quadrilateral > Trapezoid</em></p>
			<svg class="clip-svg">
				<defs>
					<clipPath id="polygon-clip-trapezoid-isosceles" clipPathUnits="objectBoundingBox">
						<polygon points="0 1, 0.3 0, 0.7 0, 1 1" />
					</clipPath>
				</defs>
			</svg>	
		</div>

		<div class="polygon-each">	
			<div class="polygon-each-img-wrap">
				<img src="http://karenmenezes.com/shapes-polygon/image.jpg" alt="demo-clip-triangle-equailateral" class="polygon-clip-triangle-equilateral">
			</div>
			<h4>Triangle: Equilateral</h4>
			<p>A triangle is a polygon with 3 edges and 3 vertices. When all sides have the same length and all angles measure 60 degrees, it is an equilateral triangle.</p>
			<p><em>Polygon > Triangle</em></p>
			<svg class="clip-svg">
				<defs>
					<clipPath id="polygon-clip-triangle-equilateral" clipPathUnits="objectBoundingBox">
						<polygon points="0 0.87, 0.5 0, 0.5 0, 1 0.87" />
					</clipPath>
				</defs>
			</svg>	
		</div>

		<div class="polygon-each">	
			<div class="polygon-each-img-wrap">
				<img src="http://karenmenezes.com/shapes-polygon/image.jpg" alt="demo-clip-triangle-isosceles" class="polygon-clip-triangle-isosceles">
			</div>
			<h4>Triangle: Isosceles</h4>
			<p>A triangle with 2 equal sides; the angles opposite the equal sides are equal.</p>
			<p><em>Polygon > Triangle</em></p>
			<svg class="clip-svg">
				<defs>
					<clipPath id="polygon-clip-triangle-isosceles" clipPathUnits="objectBoundingBox">
						<polygon points="0 1, 0.5 0, 0.5 0, 1 1" />
					</clipPath>
				</defs>
			</svg>	
		</div>

		<div class="polygon-each">	
			<div class="polygon-each-img-wrap">
				<img src="http://karenmenezes.com/shapes-polygon/image.jpg" alt="demo-clip-triangle-scalene" class="polygon-clip-triangle-scalene">
			</div>
			<h4>Triangle: Scalene</h4>
			<p>A triangle where all sides and all angles are unequal.</p>
			<p><em>Polygon > Triangle</em></p>
			<svg class="clip-svg">
				<defs>
					<clipPath id="polygon-clip-triangle-scalene" clipPathUnits="objectBoundingBox">
						<polygon points="0.2 0.7, 0.5 0, 0.5 0, 1 1" />
					</clipPath>
				</defs>
			</svg>	
		</div>

		<div class="polygon-each">	
			<div class="polygon-each-img-wrap">
				<img src="http://karenmenezes.com/shapes-polygon/image.jpg" alt="demo-clip-triangle-right" class="polygon-clip-triangle-right">
			</div>
			<h4>Triangle: Right</h4>
			<p>A triangle where one of its interior angles is a right angle.</p>
			<p><em>Polygon > Triangle</em></p>
			<svg class="clip-svg">
				<defs>
					<clipPath id="polygon-clip-triangle-right" clipPathUnits="objectBoundingBox">
						<polygon points="0.41 1, 0.41 0, 1 1, 1 1" />
					</clipPath>
				</defs>
			</svg>	
		</div>

		<div class="polygon-each">	
			<div class="polygon-each-img-wrap">
				<img src="http://karenmenezes.com/shapes-polygon/image.jpg" alt="" class="polygon-clip-pentagon">
			</div>
			<h4>Pentagon</h4>
			<p>A polygon with 5 sides and 5 angles.</p>
			<p><em>Polygon > Pentagon</em></p>
			<svg class="clip-svg">
				<defs>
					<clipPath id="polygon-clip-pentagon" clipPathUnits="objectBoundingBox">
						<polygon points="0.5 0, 1 0.4, 0.8 1, 0.2 1, 0 0.4" />
					</clipPath>
				</defs>
			</svg>	
		</div>

		<div class="polygon-each">	
			<div class="polygon-each-img-wrap">
				<img src="http://karenmenezes.com/shapes-polygon/image.jpg" alt="demo-clip-hexagon" class="polygon-clip-hexagon">
			</div>
			<h4>Hexagon</h4>
			<p>A polygon with 6 sides and 6 angles.</p>
			<p><em>Polygon > Hexagon</em></p>
			<svg class="clip-svg">
				<defs>
					<clipPath id="polygon-clip-hexagon" clipPathUnits="objectBoundingBox">
						<polygon points="0.5 0, 1 0.25, 1 0.75, 0.5 1, 0 0.75, 0 0.25" />
					</clipPath>
				</defs>
			</svg>	
		</div>

		<div class="polygon-each">	
			<div class="polygon-each-img-wrap">
				<img src="http://karenmenezes.com/shapes-polygon/image.jpg" alt="demo-clip-heptagon" class="polygon-clip-heptagon">
			</div>
			<h4>Heptagon</h4>
			<p>A polygon with 7 sides and 7 angles.</p>
			<p><em>Polygon > Hexagon</em></p>
			<svg class="clip-svg">
				<defs>
					<clipPath id="polygon-clip-heptagon" clipPathUnits="objectBoundingBox">
						<polygon points="0.5 0, 0.9 0.2, 1 0.6, 0.75 1, 0.25 1, 0 0.6, 0.1 0.2" />
					</clipPath>
				</defs>
			</svg>	
		</div>

		<div class="polygon-each">	
			<div class="polygon-each-img-wrap">
				<img src="http://karenmenezes.com/shapes-polygon/image.jpg" alt="demo-clip-octagon" class="polygon-clip-octagon">
			</div>
			<h4>Octagon</h4>
			<p>A polygon with 8 sides and 8 angles.</p>
			<p><em>Polygon > Octagon</em></p>
			<svg class="clip-svg">
				<defs>
					<clipPath id="polygon-clip-octagon" clipPathUnits="objectBoundingBox">
						<polygon points="0.3 0, 0.7 0, 1 0.3, 1 0.7, 0.7 1, 0.3 1, 0 0.7, 0 0.3" />
					</clipPath>
				</defs>
			</svg>	
		</div>

		<div class="polygon-each">	
			<div class="polygon-each-img-wrap">
				<img src="http://karenmenezes.com/shapes-polygon/image.jpg" alt="demo-clip-decagon" class="polygon-clip-star">
			</div>
			<h4>Star: Five pointed</h4>
			<p>A 5 pointed star with 10 sides.</p>
			<p><em>Polygon > Decagon</em></p>
			<svg class="clip-svg">
				<defs>
					<clipPath id="polygon-clip-star" clipPathUnits="objectBoundingBox">
						<polygon points="0.5 0, 0.63 0.38, 1 0.38, 0.69 0.59, 0.82 1, 0.5 0.75, 0.18 1, 0.31 0.59, 0 0.38, 0.37 0.38" />
					</clipPath>
				</defs>
			</svg>	
		</div>
		<p class="attribution center-text">Image source <a href="http://www.morguefile.in/archive/display/898298" target="_blank">here</a></p>
body {
  font-family: "Roboto Condensed", sans-serif;  
}

.center-text {
		text-align: center;
	}

	.attribution {
		font-size: 90%;
	}

	.wrap {
		margin: 0 auto;
	}

	.clip-svg {
		width: 0;
		height: 0;
	}
	
	.polygon-each {
		padding: 10px;
		text-align: center;
	}

	.polygon-each-img-wrap img {
		margin-bottom: 10px;
	}

	.polygon-each-img-wrap:hover {
		background: #eee;
		-webkit-transition: all 0.3s linear;
		transition: all 0.3s linear;
	}


	@media only screen and (min-width: 800px) {
		.polygon-each {
			display: inline-block;
			width: 47%;
			vertical-align: top;
		}

		.polygon-each img {
			display: block;
			margin-left: auto;
			margin-right: auto;
		}
	}

	img {
		max-width: 100%;
		height: auto;
	}

	.polygon-clip-rhombus {
		-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
		clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
		-webkit-clip-path: url("#polygon-clip-rhombus");
		clip-path: url("#polygon-clip-rhombus");
	}

	.polygon-clip-square {
		-webkit-clip-path: polygon(10% 10%, 90% 10%, 90% 90%, 10% 90%);
		clip-path: polygon(10% 10%, 90% 10%, 90% 90%, 10% 90%);
		-webkit-clip-path: url("#polygon-clip-square");
		clip-path: url("#polygon-clip-square");
	}

	.polygon-clip-rectangle {
		-webkit-clip-path: polygon(10% 100%, 10% 0%, 90% 0%, 90% 100%);
		clip-path: polygon(10% 100%, 10% 0%, 90% 0%, 90% 100%);
		-webkit-clip-path: url("#polygon-clip-rectangle");
		clip-path: url("#polygon-clip-rectangle");
	}

	.polygon-clip-rhomboid {
		-webkit-clip-path: polygon(0% 100%, 30% 0%, 100% 0%, 70% 100%);
		clip-path: polygon(0% 100%, 30% 0%, 100% 0%, 70% 100%);
		-webkit-clip-path: url("#polygon-clip-rhomboid");
		clip-path: url("#polygon-clip-rhomboid");
	}

	.polygon-clip-kite {
		-webkit-clip-path: polygon(50% 0%, 100% 30%, 50% 100%, 0% 30%);
		clip-path: polygon(50% 0%, 100% 30%, 50% 100%, 0% 30%);
		-webkit-clip-path: url("#polygon-clip-kite");
		clip-path: url("#polygon-clip-kite");
	}

	.polygon-clip-trapezoid {
		-webkit-clip-path: polygon(30% 100%, 30% 0%, 60% 0%, 100% 100%);
		clip-path: polygon(30% 100%, 30% 0%, 60% 0%, 100% 100%);
		-webkit-clip-path: url("#polygon-clip-trapezoid");
		clip-path: url("#polygon-clip-trapezoid");
	}

	.polygon-clip-trapezoid-isosceles {
		-webkit-clip-path: polygon(0% 100%, 30% 0%, 70% 0%, 100% 100%);
		clip-path: polygon(0% 100%, 30% 0%, 70% 0%, 100% 100%);
		-webkit-clip-path: url("#polygon-clip-trapezoid-isosceles");
		clip-path: url("#polygon-clip-trapezoid-isosceles");
	}

	.polygon-clip-triangle-equilateral {
		-webkit-clip-path: polygon(0% 87%, 50% 0%, 50% 0%, 100% 87%);
		clip-path: polygon(0% 87%, 50% 0%, 50% 0%, 100% 87%);
		-webkit-clip-path: url("#polygon-clip-triangle-equilateral");
		clip-path: url("#polygon-clip-triangle-equilateral");
	}

	.polygon-clip-triangle-isosceles {
		-webkit-clip-path: polygon(0% 100%, 50% 0%, 50% 0%, 100% 100%);
		clip-path: polygon(0% 100%, 50% 0%, 50% 0%, 100% 100%);
		-webkit-clip-path: url("#polygon-clip-triangle-isosceles");
		clip-path: url("#polygon-clip-triangle-isosceles");
	}

	.polygon-clip-triangle-scalene {
		-webkit-clip-path: polygon(20% 70%, 50% 0%, 50% 0%, 100% 100%);
		clip-path: polygon(20% 70%, 50% 0%, 50% 0%, 100% 100%);
		-webkit-clip-path: url("#polygon-clip-triangle-scalene");
		clip-path: url("#polygon-clip-triangle-scalene");
	}

	.polygon-clip-triangle-right {
		-webkit-clip-path: polygon(41% 100%, 41% 0%, 100% 100%, 100% 100%);
		clip-path: polygon(41% 100%, 41% 0%, 100% 100%, 100% 100%);
		-webkit-clip-path: url("#polygon-clip-triangle-right");
		clip-path: url("#polygon-clip-triangle-right");
	}

	.polygon-clip-pentagon {
		-webkit-clip-path: polygon(50% 0%, 100% 40%, 80% 100%, 20% 100%, 0% 40%);
		clip-path: polygon(50% 0%, 100% 40%, 80% 100%, 20% 100%, 0% 40%);
		-webkit-clip-path: url("#polygon-clip-pentagon");
		clip-path: url("#polygon-clip-pentagon");
	}

	.polygon-clip-hexagon {
		-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
		clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
		-webkit-clip-path: url("#polygon-clip-hexagon");
		clip-path: url("#polygon-clip-hexagon");
	}

	.polygon-clip-heptagon {
		-webkit-clip-path: polygon(50% 0, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0 60%, 10% 20%);
		clip-path: polygon(50% 0, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0 60%, 10% 20%);
		-webkit-clip-path: url("#polygon-clip-heptagon");
		clip-path: url("#polygon-clip-heptagon");
	}

	.polygon-clip-octagon {
		-webkit-clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
		clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
		-webkit-clip-path: url("#polygon-clip-octagon");
		clip-path: url("#polygon-clip-octagon");
	}

	.polygon-clip-star {
		-webkit-clip-path: polygon(50% 0%, 63% 38%, 100% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 100%, 31% 59%, 0% 38%, 37% 38%);
		clip-path: polygon(50% 0%, 63% 38%, 100% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 100%, 31% 59%, 0% 38%, 37% 38%);
		-webkit-clip-path: url("#polygon-clip-star");
		clip-path: url("#polygon-clip-star");
	}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.