Herramientas · CSS · Generador de clip-path · Guías
Guías de Generador de clip-path
Tres lecturas breves: por qué importa, cómo hacerlo, y un caso de uso concreto.
Why Shape Elements With CSS clip-path Instead of Cropped Images
A hexagon avatar or an angled hero can be baked into the image file, or cut by the browser at render time. clip-path does the cutting in CSS, which keeps one source image and one line to change, with a few side effects worth knowing first.
Leer la guíaHow to Build a CSS clip-path Polygon by Dragging Points
Start from one of eight presets, drag the points into place, add or remove points as the shape needs, and copy a polygon() value that scales with any box. Here is the process, with the limits the tool actually has.
Leer la guíaMaking a Hexagon Profile Photo With CSS clip-path
A hexagon avatar looks like one line of CSS, then the hexagon comes out squashed, the border vanishes on four sides and the shadow is gone. Here is the whole job, including the three fixes.
Leer la guía