``````		<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>
<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>
<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>
<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;
}

font-size: 90%;
}

.wrap {
margin: 0 auto;
}

.clip-svg {
width: 0;
height: 0;
}

.polygon-each {
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.