How to Hack Geometry with Gradient: Linear Edition

Lately I've been noticing a front-end trend wherein content is delivered using out-of-the-box geometry. Employing the gradient property is one way to creatively execute this.
Here are some popular geometric elements I've noticed on real designs

All of these were found on Pinterest...you can read my earlier post entitled 3 Cures for Designer's Block for more on that. You can also see these and other ideas on my Gradient Ideas Pinterest Board.

Here are my "original" designs (inspired by the ones above) that we will go through in this tutorial

I have chosen to use stock images of cacti for each of these examples...I have my reasons.

I have included relevant code in this post, but if you're more the scrape-it-yourself type or want to zoom out on it, you can see all of these designs as a single-page site here.

For my fellow Webflow devs, this supporting page is showcased on my webflow portfolio, or you can simply click here for my public share link.

Don't skip this part: for the purpose of streamlining this demo, I'm working with fixed heights here, and often widths too. These measurements directly and drastically influence the way the geometry appears. It is for this reason that I've noted them, along with gradient ratios and angles, in detail. 

All measurements are for desktop only and will require adjustments for mobile responsiveness.

Ok, let's go.

01 The Slanted Section

click image to view as webpage

Adding a slant to your div block is a fun way to pack some punch into a would-be basic design. Play around with heights and angles; the slant is the foundation for every shape created using this technique. If you can master the slant, the possibilities are endless.

English:

Number of Divs: 1; block
Fixed Height: 1155px
Fixed Width: n/a
Gradient Color: 66% transparen
tGradient Angle: 158°

HTML:

<div class="slant-top"></div>
<div class="slant-bottom"></div>

CSS:

.slant-top {
height: 1155px;
background-image: -webkit-linear-gradient(292deg, transparent 66%, #000 0);
background-image: linear-gradient(158deg, transparent 66%, #000 0);
}

.slant-bottom {
height: 550px;
background-color: #000;
}

02 The Convex Hero

click image to view as webpage

This is a web design trend with an ulterior motive in UX in that it also subtly encourages visitors to scroll down.

What we're looking at here really are just two slants positioned at inverse (converse?) angles. You could also think of it as an isosceles triangle...and yes, I had to google types of triangles to recall which kind of triangle this one is. Writing this has really elucidated the fact that my high school-level geometry skills are glaringly subpar.

Moving on...

English:

Number of Divs: 2; inline-block
Fixed Heights: 36% (of 60% of 1705px...confused yet?)
Fixed Widths: 50%
Gradient Color: 43% transparent
Gradient Angles: 198°

HTML:

<div class="convex-hero">
    <div class="convex-angles">
        <div class="convex-angle left"></div>
        <div class="convex-angle"></dv>
    </div>
</div>
<div class="convex-section">

CSS:

.convex-hero {
position: relative;
height: 60%;
background-image: -webkit-linear-gradient(270deg, rgba(30, 71, 84, .75), rgba(30, 71, 84, .75));
background-image: linear-gradient(180deg, rgba(30, 71, 84, .75), rgba(30, 71, 84, .75));
}

.convex-angles {
position: absolute;
left: 0px;
right: 0px;
bottom: 0px;
height: 36%;
}

.convex-angle {
display: inline-block;
width: 50%;
height: 100%;
background-image: -webkit-linear-gradient(288deg, transparent 43%, #fff 0);
background-image: linear-gradient(162deg, transparent 43%, #fff 0);
}

.convex-angle.left {
background-image: -webkit-linear-gradient(252deg, transparent 43%, #fff 0);
background-image: linear-gradient(198deg, transparent 43%, #fff 0);
}

.convex-section {
height: 40%;
color: #8c7d83;
}

03 The Offset Pentagon

click image to view as webpage

Originally, I was planning to show how to create a run-of-the-mill symmetrical pentagon, but where’s the fun in that? Not to mention, the angles in the convex hero example above do technically form a pentagon (although you would have to adjust them to make it more conventionally-shaped).

To achieve this more abstract look, I have a regular old rectangular black div block, and then the div block holding the angles underneath.

For those with advanced CSS skills, note that It would have been possible to do this all as a single div block (as in, not stack the angled part under the rectangle).

English:

Number of Divs: 1; block
Fixed Height: 350px
Fixed Width: 50%
Gradient 1 Color: 49% black
Gradient 1 Angle: 156°
Gradient 2 Color: 17% white
Gradient 2 Angle: 29°

HTML:

<div class="pentagon-section pentagon-hero">
    <div class="pentagon-hero-copy"></div>
    <div class="pentagon-angle"></div>
</div>
<div class="pentagon-section pentagon-next"></div>

CSS:

.pentagon-section {
background-color: #fff;
}

.pentagon-section.pentagon-hero {
position: relative;
height: 900px;
}

.pentagon-hero-copy {
width: 50%;
height: 550px;
background-color: #000;
}

.pentagon-angle {
width: 50%;
height: 350px;
background-image: -webkit-linear-gradient(61deg, #fff 17%, transparent 0), -webkit-linear-gradient(294deg, #000 49%, transparent 0);background-image: linear-gradient(29deg, #fff 17%, transparent 0), linear-gradient(156deg, #000 49%, transparent 0);
}

.pentagon-section.pentagon-next {
height: 805px;
}

04 The Pop-Up Diamond

click image to view as webpage

Here I'm showing you two different ideas for diamonds, which employ two different techniques.

At a glance:The yellow diamond in the hero is made up of 4 separate div blocks whereas the image diamond in the section is a single div with gradient-angled corners.

Yellow Diamond (top)

English:

Number of Divs: 4; absolute - each to it's position on a compass (SW, NW, NE, SE)
Fixed Height: 50%
Fixed Width: 50%
Gradient Color: 50% transparent
Gradient  Angles: 45°, 135°, 225°, 315°

Section Diamond (bottom)

English:
Number of Divs: 1; inline-block
Fixed Height: 700px;
Fixed Width: 700px;
Gradient Color: 25% gold
Gradient Angles: 45°, 135°, 225°, 315°

Yellow Diamond

HTML:

<div class = "diamond-section diamond-hero">
    <div class="hero-diamond">
        <div class="hero-angle sw"></div>
        <div class="hero-angle nw"></div>
        <div class ="hero-angle ne"></div>
        <div class="hero-angle se"></div>
    </div>
</div>

Section Diamond

HTML:

<div class="diamond-section diamond-next">
    <div class="diamond-section-img"></div>
</div>

Yellow Diamond

CSS:

.diamond-section.diamond-hero {
height: 599px;
background-image: -webkit-linear-gradient(270deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .5));
background-image: linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .5));
}

.hero-diamond {
position: relative;
display: inline-block;
width: 150px;
height: 150px;
}

.hero-angle {
position: absolute;
width: 50%;
height: 50%;
background-image: -webkit-linear-gradient(270deg, transparent 50%, #fee65f 0);background-image: linear-gradient(180deg, transparent 50%, #fee65f 0);
}

.hero-angle.sw {
left: 0px;
bottom: 0px;
background-image: -webkit-linear-gradient(45deg, transparent 50%, #fee65f 0);background-image: linear-gradient(45deg, transparent 50%, #fee65f 0);
}

.hero-angle.nw {
left: 0px;
top: 0px;
background-image: -webkit-linear-gradient(315deg, transparent 50%, #fee65f 0);background-image: linear-gradient(135deg, transparent 50%, #fee65f 0);
}
.hero-angle.ne {
top: 0px;
right: 0px;
background-image: -webkit-linear-gradient(225deg, transparent 50%, #fee65f 0);background-image: linear-gradient(225deg, transparent 50%, #fee65f 0);
}.hero-angle.se {
right: 0px;
bottom: 0px;
background-image: -webkit-linear-gradient(135deg, transparent 50%, #fee65f 0);background-image: linear-gradient(315deg, transparent 50%, #fee65f 0);
}

Section Diamond

CSS:
.diamond-section.diamond-next {
height: 1106px;
padding-top: 75px;
background-color: #fee65f;
}

.diamond-section-img {
display: inline-block;
width: 700px;
height: 700px;
background-image: -webkit-linear-gradient(135deg, #fee65f 25%, transparent 0, transparent 99%), -webkit-linear-gradient(225deg, #fee65f 25%, transparent 0, transparent), -webkit-linear-gradient(315deg, #fee65f 25%, transparent 0, transparent), -webkit-linear-gradient(45deg, #fee65f 25%, transparent 0);
background-image: linear-gradient(315deg, #fee65f 25%, transparent 0, transparent 99%), linear-gradient(225deg, #fee65f 25%, transparent 0, transparent), linear-gradient(135deg, #fee65f 25%, transparent 0, transparent), linear-gradient(45deg, #fee65f 25%, transparent 0);
}

06 The Hexagon Honeycomb

click image to view as webpage

As I write this it occurs to me that honeycomb is always comprised of hexagons, so this heading is redundant. But at least it's alliterative!

Before I get into the nitty gritty, here's a pro tip: if the div block out of which you want to "cut" your hexagon is a perfect square or perfect circle, your hexagon will look disproportionate and weird.

For a Single Hexagon

English:

Number of Divs: 1; inline
Fixed Height: 333px
Fixed Width: 285px
Gradient Color: 18% grey
Gradient Angles: 30°, 150°, 210°, 330°

For the honeycomb

English:
Radius: 100px
Left Margin: 25px
Right Margin: 25px
Top Margin: -60px

HTML:

<div class="hexagon-section hexagon-hero"></div>
   <div class="hexagon-section hex-next">
        <div class="honeycomb">
        <div class="hex">
        <div class="hex">
        <div class="hex">
        <div class="hex">
        <div class="hex">
    </div>
</div>

CSS:

.hexagon-section.hexagon-hero {
height: 45%;
}

.hexagon-section.hex-next {
height: 55%;
background-color: #333;
}

.honeycomb {
padding-top: 60px;
}

.hex {
width: 285px;
height: 333px;
margin-top: -60px; 
margin-right: 25px; 
margin-left: 25px; 
border-radius: 100px; 
}

Published
December 4, 2017
Previous Post

10 Gifts for the Tech Person in your Life

Next Post

Next Post

Previous Post

10 Gifts for the Tech Person in your Life