How to invert the pentagon created using CSS?

Question

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>

Answer 1

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:

• The main element has a 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.
• The pseudo element has a 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.

• Change the trapezoid such that the bottom is wider than the top. That is, make 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.
• Similarly for the triangular part, set the border-top as 70px and its color as #abefcd. Change the border-bottom to 0px. This will make the triangle point down.
• Adjust the top value such that the triangle (pseudo-element) is below the trapezoid (which is 100px tall).