CSS forming a shapes using background gradient border pseudo-elements

BODY: background gradient texture pattern tile hexagon

radial-gradient + linear-gradient

ELEMENT: background gradient rainbow

linear-gradient

ELEMENT: forms a shape using CSS

:pseudo-elements border | clip-path: polygon | transform: rotate | border-radius

Hexagon Clip Cube

clip-path: polygon *3

Hexagon Clip

clip-path: polygon

Hexagon Vert

:pseudo-elements border-triangle

Hexagon Hor

box + :pseudo-elements border-triangle

Hexagon Vert+Cube

:pseudo-elements border-triangle *2

Heart Clip

clip-path: path

Heart

transform: rotate border-radius

Star

:pseudo-elements border-triangle transform: rotate

Star
Clip

clip-path: polygon

Square Clip

clip-path: polygon
:pseudo-elements border-triangle
clip-path: polygon