CSS: Custom shape having angled borders - html

Question

I have a custom fancy footer created with html and css. See it here: https://jsfiddle.net/fb6qdvrw/
To create the triangles I use :before and :after like this:
#footer .layer-4.bg-secondary:before {
content: '';
position: absolute;
top: 0;
right: 0;
left: 100%;
border-top: 120px solid transparent;
border-left: 120px solid #FFFFFF;
width: 0;
}
#footer .layer-4.bg-secondary:after {
content: '';
position: absolute;
top: 10px;
right: 0;
left: 100%;
border-top: 120px solid transparent;
border-left: 120px solid #ffcf87;
width: 0;
}
The problem I want to solve is the white line / border thickness. I need it to have the same thickness for diagonal and horizontal line. Is this possible in my case? I see I am limited to triangles and rectangles, but I think there must be a solution. For the moment my fancy footer is ugly because of this.

Answer 1

CSS Based Approaches:
Below are a couple of pure CSS based methods to create this shape:
1 - Skewed Transformation:
You can create this shape by using CSS3 skew() transformations.
Required HTML:
All we need is 2 elements inside footer i.e:
<div class="footer">
<div class="top"></div>
<div class="bottom"></div>
</div>
We will then use ::before and ::after pseudo elements for each child element to draw skewed overlays on the respective element:
Output:
Working Example:
body {margin: 0;}
.footer {
position: relative;
padding-top: 100px;
overflow: hidden;
}
.top,
.bottom {
position: relative;
height: 50px;
}
.bottom {
margin-top: 10px;
}
.top::before {
transform-origin: left top;
transform: skew(45deg);
position: absolute;
background: green;
height: 100px;
width: 145px;
content: '';
top: 100%;
right: 0;
}
.bottom:before {
transform-origin: right bottom;
transform: skew(45deg);
position: absolute;
background: blue;
height: 150px;
bottom: 100%;
width: 95px;
content: '';
left: 0;
}
.top::after,
.bottom::after {
transform-origin: left bottom;
transform: skew(45deg);
position: absolute;
background: green;
right: -100px;
left: 100px;
content: '';
bottom: 0;
top: 0;
}
.bottom:after {
transform-origin: right bottom;
background: blue;
right: 100px;
left: -100px;
}
<div class="footer">
<div class="top">
</div>
<div class="bottom">
</div>
</div>
2- Linear-Gradient:
In this approach we will use CSS linear-gradient() function to draw this shape on the element as a background. As we can apply multiple background images on an element so we will divide this shape in small parts and draw them on the element with precisely controlled sizes and positions.
We can divide this shape in 4 parts and draw them each having specific size and position.
Below is a step by step procedure to create this shape:
Required HTML:
We need only one block level element (div) possibly having some class i.e:
<div class="shape"></div>
Step 1:
First of all, lets try to create the long skewed shape on the bottom of the element.
Necessary CSS:
div {
background-image: linear-gradient(-135deg, transparent 50px, blue 50px);
background-repeat: no-repeat;
background-size: 100% 50px;
background-position: right 75px bottom;
}
We will have the following output:
Step 2:
Now we will draw the large triangular shape on the left bottom:
Necessary CSS:
div {
background-image: linear-gradient(-135deg, transparent 50px, blue 50px),
linear-gradient(-135deg, transparent 135px, blue 135px);
background-size: 100% 50px, 180px 200px;
background-position: right 75px bottom, left bottom;
}
This will create the following output:
Step 3:
Now we will draw the upper triangular bar with following CSS:
div {
background-image: linear-gradient(-135deg, transparent 50px, blue 50px),
linear-gradient(-135deg, transparent 135px, blue 135px),
linear-gradient(45deg, transparent 50px, green 50px);
background-size: 100% 50px, 180px 200px, 100% 50px;
background-position: right 75px bottom, left bottom, left 75px bottom 60px;
}
And we will have the following output:
Step 4:
Finally, we will draw the right bottom triangular image:
div {
background-image: linear-gradient(-135deg, transparent 50px, blue 50px),
linear-gradient(-135deg, transparent 135px, blue 135px),
linear-gradient(45deg, transparent 50px, green 50px),
linear-gradient(45deg, transparent 50px, green 50px);
background-size: 100% 50px, 180px 200px, 100% 50px, 150px 100px;
background-position: right 75px bottom, left bottom, left 75px bottom 60px, right bottom;
}
This will create the following shape:
Working Example:
div {
background-image: linear-gradient(-135deg, transparent 50px, blue 50px),
linear-gradient(-135deg, transparent 135px, blue 135px),
linear-gradient(45deg, transparent 50px, green 50px),
linear-gradient(45deg, transparent 50px, green 50px);
background-repeat: no-repeat;
background-size: 100% 50px, 180px 200px, 100% 50px, 150px 100px;
background-position: right 75px bottom, left bottom, left 75px bottom 60px, right bottom;
height: 200px;
}
<div class="shape"></div>
SVG Based Approach:
Polygon Shape:
We can use SVG's polygon element to draw this shape as well:
polygon element draws a closed shape by connecting straight line segments. This element takes single points argument which contains a list of points
Necessary Code:
<svg width="400" height="140" viewBox="0 0 400 140">
<polygon points="0,0 80,100 300,100 330,140 0,140" />
<polygon points="53,50 85,90 305,90 343,140 400,140 400,50" />
</svg>
Working Example:
body {margin: 0;}
svg {
height: auto;
width: 100%;
}
<svg width="400" height="140" viewBox="0 0 400 140">
<polygon points="0,0 80,100 300,100 330,140 0,140" fill="blue" />
<polygon points="53,50 85,90 305,90 343,140 400,140 400,50" fill="green" />
</svg>
Useful Resources:
CSS3 Transforms: Specs, MDN
Linear Gradient: Specs, MDN
SVG: Specs, MDN