Polygons, Stars, Arrows & Trapezoids • Visual Shape Cutter
clip-path is supported in all modern browsers. It works on any element — give the element a defined width/height and background color for the shape to actually show.
The CSS clip-path property cuts an element down to a custom shape by defining a polygon — a series of points connected in order to form an outline, with everything outside that outline hidden. This tool generates the correct set of points for four common shape families: a regular polygon with any number of sides, a star with adjustable spike count and depth, a directional arrow, and a trapezoid with an adjustable top width. Pick a shape, adjust it visually, and copy the finished clip-path declaration. All processing happens locally in your browser.