Work In Progress
This page is a work in progress.
Introduction
The clip-path property allows you to clip an element to a basic shape, such as a polygon, circle, ellipse, or inset, or to an SVG source. You can use clip-path to specify a region of an element to display, while hiding the rest. For example, you can apply clip-path to a paragraph tag to clip only a portion of the text.
Trapezoid
Text goes here
The code for this:
<div style="background-image: linear-gradient(25deg,#d64c7f,#ee4758 50%);margin: 10px;padding: 15px 45px;text-align: center;font-size:150%;background-size: 200% auto;color: white; box-shadow: 0 0 20px #eee;clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);">Text goes here</div>
Parallelogram
Text goes here
Hexagon
Text goes here
Octagon
Text goes here
Bevel
Text goes here
Rabbet
Text goes here