CSS Shapes Clip Path
Custom Shapes and Masks
Irregular layouts, image cutouts, creative designs.
Clip-Path Shapes
.circle {
clip-path: circle(50% at 50% 50%);
}
.polygon {
clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
}
.shape-outside {
float: left;
shape-outside: circle(50%);
width: 200px;
height: 200px;
}Masking Techniques
- mask-image, mask-position
- mask-composite
- css-shapes-2 (future spec)