About clip-path
The CSS clip-path property allows you to precisely control which parts of an element are shown. There are several types of shape supported, including ellipse (for circles and ellipses), polygons (for polygons with straight edges) and path (for shapes with curved sides given by bezier curves).
The units used in the path command are always pixels. If you wish to use percentages then you can use an SVG and the url() command. The SVG needs to be placed somewhere in the document, and the ID of the <clipPath> element is referenced in the url(). Make sure that the ID is unique in the webpage.
Keeping Text within a Shape
The path generated for clip-path can also be used for the shape-outside property. This will wrap the surrounding text around the element, rather than just masking it.
Since the clip-path just hides some parts of an element any text that you have in your element will be hidden. If you want to keep the text within your chosen bounds you need to use the shape-outside property. This controls how adjacent elements are wrapped around an element, so you need to add a <div> for each side you want to shape at the start of the parent element, and float them left and right.
HTML
<div id="text">
<div id="left"></div>
<div id="right"></div>
This text will be shaped by #left and #right
</div>
CSS
#left{
float: left;
color: white;
height: 100%;
width: 50%;
shape-outside: polygon(0 0, 100% 0, 0 100%);
}
#right{
float: right;
height: 100%;
width: 50%;
color: white;
line-height: 100px;
shape-outside: polygon(100% 0, 100% 100%, 0 100%);
}
Animations
The clip-path property can be animated. If you want to have the shapes transform smoothly the paths at every time in the animation must have the same number of points.
@keyframes animationName{
0%{
clip-path: polygon(0 0, 100% 100%, 0 100%);
}
100%{
clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 50%);
}
}