Tutorial by Examples

CSS: div{ width:200px; height:200px; background:teal; clip-path: polygon(0 0, 0 100%, 100% 50%); /* refer remarks before usage */ } HTML: <div></div> In the above example, a polygonal clipping path is used to clip the square (200 x 200) element into a triangle shape....

CSS: div{ width: 200px; height: 200px; background: teal; clip-path: circle(30% at 50% 50%); /* refer remarks before usage */ } HTML <div></div> This example shows how to clip a div to a circle. The element is clipped into a circle whose radius is 30% based on the dim...

With Clipping and Masking you can make some specified parts of elements transparent or opaque. Both can be applied to any HTML element. Clipping Clips are vector paths. Outside of this path the element will be transparent, inside it's opaque. Therefore you can define a clip-path property on elemen...

CSS div { height: 200px; width: 200px; background: url(http://lorempixel.com/200/200/nature/1); mask-image: linear-gradient(to right, white, transparent); } HTML <div></div> In the above example there is an element with an image as its background. The mask that is a...

CSS div { width: 200px; height: 200px; background: url(http://lorempixel.com/200/200/abstract/6); mask-image: radial-gradient(circle farthest-side at center, transparent 49%, white 50%); /* check remarks before using */ } HTML In the above example, a transparent circle is created...

CSS div { /* check remarks before usage */ height: 200px; width: 400px; background-image: url(http://lorempixel.com/400/200/nature/4); mask-image: linear-gradient(to top right, transparent 49.5%, white 50.5%), linear-gradient(to top left, transparent 49.5%, white 50.5%), linear-gradient...