Fill from #7C3AED to #F97362 -webkit-clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%); clip-path cuts an element to a shape, so images, boxes and buttons can be triangles, hexagons or blobs. border-radius with eight values makes soft, organic shapes while keeping borders and shadows.
Clean outline 6 points, no crossing edges.
Fills 68% of the box Points are percentages, so the shape stretches with the element.
Browser support clip-path works in all current browsers. The -webkit- line helps older Safari.
Use percentages so the shape scales with the element. clip-path also clips shadows and borders; wrap the element in a parent with a drop-shadow filter to keep a shadow. Use Blob for backgrounds and hero images, Radius for avatars and cards. Download the SVG to use the same shape as a logo or mask. Points are stored as percentages of the element box and written as polygon(). Blobs join random control points around a circle with a Catmull-Rom curve, sampled into a polygon. Organic radii keep each opposite pair adding up to 100% so corners never overlap. Everything runs in your browser.