Geek Answers Handbook

How to invert a pentagon created using CSS?

I want to create a pentagon that points down (back). But I do not mention the 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>
Run codeHide result
+4
source share
3 answers

TL DR: (solution)

The easiest way to invert this pentagon is to invert the borders that are used to create it, as in the following 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>
Run codeHide result

How is a pentagon shape created?

The pentagon shape that you showed in the question is created as follows:

  • border-top 100px, #abefcd, border-left border-right 36px, . , .
  • border-bottom 70px, #abefcd, border-left border-right 90px, . , , .

. , .

#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>
Hide result

?

, , .

  • , , . border-bottom 100px #abefcd. border-top 0px. border-top , 0px.
  • border-top 70px #abefcd. border-bottom 0px. .
  • top , () ( 100px).
+7

, , transform, .

#pentagon {
  margin: 70px 0 5px 20px;
  position: relative;
  width: 110px;
  border-width: 100px 36px 0;
  border-style: solid;
  border-color: #abefcd transparent;
  transform: rotate(180deg);
}
#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>
Hide result
+4

div, , . HTML/CSS , .

#pentagon {
     margin:70px 0 5px 20px;
     position: relative;
     width: 110px;
     border-width: 100px 36px 0;
     border-style: solid;
     border-color: #abefcd transparent;
     -moz-transform: scale(1, -1);
     -webkit-transform: scale(1, -1);
     -o-transform: scale(1, -1);
     -ms-transform: scale(1, -1);
     transform: scale(1, -1);
    }
    #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>
Hide result
+3

More articles:


All Articles