CSS: custom shape with corner borders
I have a custom footer generated with html and css. See here: https://jsfiddle.net/fb6qdvrw/
To create triangles, I use :before
and :after
as follows:
#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 thickness of the white line / border. I need it to have the same thickness for the diagonal and horizontal lines. Is this possible in my case? I see that I am limited to triangles and rectangles, but I think there must be a solution. At the moment, my fancy footer is ugly because of this.
source to share
CSS based approaches:
Below are some simple CSS based methods to create this shape:
1 - Beveled transformation:
You can create this shape using CSS3 transforms skew()
.
Required HTML:
All we need is two elements inside the ie footer:
<div class="footer">
<div class="top"></div>
<div class="bottom"></div>
</div>
Then we will use ::before
and ::after
pseudo for each child to draw skewed labels on the corresponding 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 a CSS function linear-gradient()
to draw this shape on an element as a background. Since we can apply multiple background images to an element, so we will split this shape into smaller pieces and draw them on the element with precisely controlled sizes and positions.
We can divide this shape into 4 parts and draw them, each of which has a specific size and position.
Below is a step-by-step procedure for creating this form:
Required HTML:
We only need one block-level element ( div
), possibly of some kind ie class:
<div class="shape"></div>
Step 1:
First of all, let's try to create a long, skewed shape at the bottom of the element.
Required 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:
We will now draw a large triangular shape in the lower left corner:
Required 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:
We will now draw the top triangular bar with the 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'll get the following output:
Step 4:
Finally, we draw the bottom right 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 an SVG element polygon
to draw this shape:
polygon
draws a closed shape by connecting straight line segments. This element takes a single argument points
which contains a list of points
Required 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: Features , MDN
- Linear Gradient: Specifications , MDN
- SVG: Specifications , MDN
source to share