3 Ways to Create Angled Edges With SVG

In this tutorial you’ll learn three ways to create easy angled edges using SVG. To begin with we’ll use an inline SVG, then we’ll use an SVG background on a pseudo-element, before finishing off with a Sass mixin. Let’s dive in!

Watch the Screencast

Angled What?

When I say “angled edges” I’m referring to things like the background on Stripe’s website:

Or the overlays on this website:

These would be easy enough to create using a graphics application; you could create the design, export as a single graphic, and load into your web page. However, if you want more flexibility, you should forget that approach. Let’s look at some alternative ways to get angled edges.

Quick Refresher in Hand-Coding SVG

Before we move on, if you need to remind yourself of the basics where hand-coding SVG is concerned, Kezz has you covered:

1. Inline SVG

Let’s start with an SVG, within a container, in our markup:

<div class="hero">
    <svg viewBox="0 0 100 100" preserveAspectRatio="none">
        
    </svg>
</div>

We’ll come back to the details of what we’ve done in a moment. Now add some basic styles to give our hero some dimensions and a gradient background:

body {
    background-color: #eaeaea;   
}

.hero {
    position: relative;
    height: 300px;
    background-image: linear-gradient(#4568dc, #b06ab3);
}

That gives us the following:

But let’s imagine we want to have that bottom edge as an angle going up towards the right. We’re going to do that with our SVG. In it, we’re going to create a polygon with some point coordinates:

<div class="hero">
    <svg viewBox="0 0 100 100" preserveAspectRatio="none">
        <polygon points="0,100 100,0 100,100" />
    </svg>
</div>

You’ll now see a large, black triangle in the bottom right of your page. Through our CSS we can style that triangle to suit our needs, filling it the same as our background so the hero appears to have been sliced at the bottom:

svg {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 10vw;
    fill: #eaeaea;
}

That gives us:

2. Pseudo-Element + SVG

Our second approach improves on the first, in that content within the gray area won’t be cut off by overlaying a gray triangle. We’ll being again with a simple container div:

<div class="hero">    
</div>

This time we’ll control the masking all from within our CSS, starting with the hero styles we used in the last demo:

body {
    background-color: #eaeaea;   
}

.hero {
    position: relative;
    height: 300px;
    background-image: linear-gradient(#4568dc, #b06ab3);
}

Now we’ll add a pseudo-element to our hero, to which we’ll add the SVG as a background image. First, we’ll need to encode our SVG so that we can actually use it in CSS. So grab the SVG code we wrote last time, change the points to 0,0 100,0 0,100 in order to flip it round, head over to URL-encoder for SVG, and paste the contents into the box:

Copy the Ready for CSS snippet and paste it into the pseudo-element styles:

.hero::after {
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 100,0 0,100' /%3E%3C/svg%3E");   
}

You can also add a fill='' attribute if you like, after the viewBox attribute for example. Add some more properties to position and size the pseudo-element:

.hero::after {
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='tomato' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 100,0 0,100' /%3E%3C/svg%3E");   
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    content: '';
    height: 10vw;
    width: 100%;
    position: absolute;
    bottom: -10vw;
}

That gives us this:

Thanks to our Ziggy Stardust colors we can clearly see our SVG like this. Now we just need to color the triangle (using the fill='' attribute) so that it’s the same color as the purple at the bottom of the gradient:

Note: thanks to Bob Proctor for pointing out that hex values in the fill attribute don’t seem to be recognised by FireFox. You’ll need to use RGB, or HSL, or name values.

The Importance of VW Units

There’s a reason we used vw units for the height of our SVG: we want the angle of our triangle to remain consistent no matter what the width of the viewport. If we were to use px units, the height of the triangle wouldn’t change for narrower screens, which would make the angle of the triangle more acute. Try it yourself!

3. The Sass Mixin

This final approach uses a Sass mixin to do all the heavy lifting, but it essentially achieves what we did in the previous example. Head over to the Angled Edges GitHub repo, grab the mixin, and include it in your project (I’m going to paste the whole thing into the SCSS window of a CodePen project).

Next, add our old friend the hero div to your markup. Add the basic styles too, so that we get the usual 300px gradient effect.

Then, within our .hero we add the mixin:

@include angled-edge();

The parameters we need are as follows: we need our triangle to be outside the hero, at the bottom. The position of the point where the angle begins is lower right, the color we’re after is the purple #b06ab3, and then the height of the triangle will be 100. The limitation of this is that the mixin doesn’t accept relative values for the height or the width.

Our mixin looks like this:

@include angled-edge("outside bottom", "lower right", #b06ab3, 100);

And this is what we get:

For more details on the available parameters, check out the GitHub repo. Thanks go to Joseph Fusco for his hard work.

Conclusion

So there we have it; three methods for achieving angled edges. Each one has its merits, and practicing each one will give you a solid understanding of how SVGs can be manipulated for visual effect.