This page was created by Laura Hines for the purpose of supporting a blog post entitled How to Hack Geometry with Gradient: Linear Edition.

The post, together with this live-action page, demonstrates how to use the linear gradient property to give rectangular divs the appearance of having a different geometric shape. If you haven't arrived here via my blog, I urge you to read (or at least skim) the article before trying to make sense of what you are seeing in your browser right now.

01.

The Slanted Section

Hello,

Cactus

Cacti are Cool

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Learn More

Don't
Get
Pricked

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

02.

The Convex Hero

Succulent Fact No. 11,157

Cacti Can't Talk

Learn the Truth

01

Knowledge

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

03.

The Offset Pentagon

#CactusLife

SUCCULENTS
DON'T PLAY
DODGEBALL

All the Facts

Cacti Can
Be Green
And Have
Pink Flowers

View All

04.

The Pop-Up Diamond

Cactus

A Cactus

in the

Rough

Cacti Are a
Girl's Best Friend

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

05.

Hexagon Honeycomb

Cactus, Distract Us

I am rather amused by this heading

honeycomb Cactus Practice