I want to create pentagon which is pointing downward (reverse). But I don't how to mentions points.
#pentagon {
margin:70px 0 5px 20px;
position: relative;
width: 110px;
border-width: 100px 36px 0;
border-style: solid;
border-color: #abefcd transparent;
}
#pentagon:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -170px;
left: -36px;
border-width: 0 90px 70px;
border-style: solid;
border-color: transparent transparent #abefcd;
}
<div id="pentagon"></div>
TL;DR: (Solution)
The simplest way to invert that pentagon would be to invert the borders that are used in creating it like in the below snippet:
#pentagon {
margin: 0px 0 5px 20px;
position: relative;
width: 110px;
border-width: 0px 36px 100px;
border-style: solid;
border-color: #abefcd transparent;
}
#pentagon:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: 100px;
left: -36px;
border-width: 70px 90px 0px;
border-style: solid;
border-color: #abefcd transparent transparent;
}
<div id="pentagon"></div>
How is the pentagon shape in question created?
The pentagon shape that you have shown in question is created as follows:
border-top
of 100px whose color is #abefcd
, it has border-left
and border-right
as 36px but they are transparent. This produces a trapezoid which is wider at the top and shorter at the bottom.border-bottom
of 70px whose color is #abefcd
, it has border-left
and border-right
as 90px but they are transparent. This produces a triangular shape which is then placed on top of the main element using absolute positioning. Both these together produce the pentagon. I have changed the border colors in the below snippet so that you can see it visually.
#pentagon {
margin:70px 0 5px 20px;
position: relative;
width: 110px;
border-width: 100px 36px 0;
border-style: solid;
border-color: red transparent;
}
#pentagon:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -170px;
left: -36px;
border-width: 0 90px 70px;
border-style: solid;
border-color: transparent transparent blue;
}
<div id='pentagon'></div>
How do I invert it?
It is very simple to do once we have the understanding of how the shape is created.
border-bottom
as 100px and set its color as #abefcd
. Change border-top
to 0px. The color of border-top
doesn't matter because it is anyway 0px wide.border-top
as 70px and its color as #abefcd
. Change the border-bottom
to 0px. This will make the triangle point down.top
value such that the triangle (pseudo-element) is below the trapezoid (which is 100px tall).If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With