TL;DR: (Solution)
To flip the pentagon shape, you can simply adjust the border properties in the CSS snippet provided below:
#pentagon {
margin: 0px 0 5px 20px;
position: relative;
width: 110px;
border-width: 100px 36px 0px;
border-style: solid;
border-color: #abefcd transparent;
}
#pentagon:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -170px;
left: -36px;
border-width: 0px 90px 70px;
border-style: solid;
border-color: transparent transparent blue;
}
<div id='pentagon'></div>
How is the pentagon shape created?
The pentagon shape shown in the question is achieved by manipulating the borders of an element and its pseudo-element:
- The main element has a trapezoid shape with a wider top defined by
border-top: 100px, colored in #abefcd, while the side borders are set to 36px but are transparent.
- The pseudo element creates a triangle shape with borders resembling
border-bottom: 70px, colored in #abefcd, and side borders of 90px but transparent, positioned above the main element using absolute positioning.
This combination forms the pentagon shape. The CSS snippet provided visualizes this structure with altered border colors for easy comprehension.
#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 to reverse it?
Reversing the shape involves adjusting the border dimensions in accordance with the desired transformation:
- To create an inverted trapezoid, switch the values so that the bottom becomes wider than the top by setting
border-bottom: 100px with color #abefcd and making border-top: 0px.
- For the triangular section, make the
border-top: 70px with color #abefcd and change border-bottom to 0px to point the triangle downwards.
- Adjust the positioning by altering the 'top' value to ensure the triangle appears below the trapezoid element.