Diagonal Borders With CSS And SVG
July 26, 2019 by Andreas Wik
I really like the style where the top or bottom border of container is not straight, but diagonal. It can look look really nice if done right. Such as this template from Pixelarity below:
There are a few different ways to get this done, but I’ve found using an SVG shape to be the most elegant, efficient and browser compatible.
The idea is basically that you create the element as you normally would, and then place an SVG inside of it, with its position set to absolute and place it on the side where you want the diagonal border.
Then fill this SVG with the same color as the next or previous section’s background image.
<div id="top-section">
<!-- SVG shape with the same background color as the container below to create the illusion of a diagonal border -->
<svg id="top-section-border" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon fill="#eeeeee" points="0,100 100,0 100,100"/>
</svg>
</div>#top-section {
position: relative;
width: 100%;
background: #5D2E46;
min-height: 200px;
}
#top-section-border {
position: absolute;
bottom: 0;
width: 100%;
height: 70px;
}
Check out the CodePen below to see it in action. The SVG in my example below has a bit of transparency to it just so you can see the shape of it.
See the Pen Diagonal border 1 by Andreas Wik (@andreaswik) on CodePen.
Remove the transparency and we get what we want:
See the Pen Diagonal border 2 by Andreas Wik (@andreaswik) on CodePen.
This is fun!
See the Pen Diagonal borders with CSS and SVG by Andreas Wik (@andreaswik) on CodePen.
Working with SVG gives us a lot of freedom, we don’t have to stick to just triangles. (In the example below I’ve actually positioned the SVG to -1px as there was a small weird overlap of 1px at certain viewport widths, seems to happen with SVG’s sometimes.)
See the Pen fun svg css by Andreas Wik (@andreaswik) on CodePen.
Share this article
