CSS Shapes: Dividers, Triangles, Outlines & Tooltips (2026)

CSS Shapes with Clip-Path

The CSS clip-path property creates non-rectangular shapes by defining a clipping region — only the portion of the element inside the path is visible. It supports circles, ellipses, polygons, and SVG paths, enabling creative image cropping, shaped containers, and animated reveal effects. Create custom shapes with our Clip-Path Maker.

Basic Shape Functions

clip-path: circle(50%) creates a perfect circle. clip-path: ellipse(40% 60%) creates an ellipse. clip-path: polygon(50% 0%, 100% 100%, 0% 100%) creates a triangle. clip-path: inset(10% 20%) creates a rectangular inset. The polygon function is the most flexible — you can define any shape by listing vertex coordinates as percentage pairs.

Animating Clip-Path

Clip-path can be smoothly transitioned with CSS transitions, enabling reveal effects, morphing shapes, and interactive hover states. The key requirement is that both the start and end shapes must use the same function type and the same number of points. A 4-point polygon can transition to another 4-point polygon, but not to a circle or a 6-point polygon.

CSS Triangle Tricks

The classic CSS triangle technique uses border manipulation. When an element has zero width and height, its borders meet at a point. By making three borders transparent and one colored, the visible border forms a triangle shape. The triangle's direction is opposite to the colored border — a colored bottom-border points upward. Generate triangle CSS with our CSS Triangle Generator.

CSS triangles are commonly used for tooltip arrows, dropdown indicators, breadcrumb separators, and decorative elements. For more complex triangles (equilateral, scalene, or non-right-angle), clip-path: polygon() is a cleaner and more flexible approach than the border trick.

Section Dividers

Section dividers create visual transitions between page sections — far more interesting than straight horizontal lines. The most common approaches are SVG waves, CSS clip-path angles, CSS transforms with pseudo-elements, and CSS border tricks.

SVG Wave Dividers

SVG waves are the most popular section divider style. They're resolution-independent, lightweight, and fully customizable. Generate SVG wave shapes with our SVG Wave Generator. Place the generated SVG between sections, set its width to 100%, and match its fill color to the section below it for a seamless visual transition.

Angled Dividers with CSS

For simpler geometric dividers, CSS clip-path on the section element itself creates clean diagonal cuts. Apply clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%) to cut the bottom of a section at an angle. This technique doesn't require any additional HTML elements and works responsively at any viewport width.

Blob Dividers

Organic, blob-shaped dividers add personality to playful and creative designs. Generate organic blob shapes with our Blob Shape Generator, then position them between sections as SVG elements. Layer multiple blobs with different colors and opacities for depth. Create CSS dividers visually with our CSS Divider Generator.

This guide is part of the Ultimate Design Tools blog. Browse all 103+ free tools.