如何反转使用CSS创建的五边形？

Question

我想创造一个指向下方(反向)的五边形.但我不知道怎么提点.

#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 :(解决方案)

反转五边形的最简单方法是反转用于创建它的边框,如下面的代码段所示:

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

五角大楼的形状是如何形成的？

您显示的五边形形状创建如下:

• 主元件具有border-top的100像素其颜色#abefcd,它具有border-left与border-right作为36px但它们是透明的.这产生了一个梯形,顶部较宽,底部较短.
• 伪元件具有border-bottom的70像素,其颜色#abefcd,它具有border-left和border-right如90像素,但它们是透明的.这产生三角形形状,然后使用绝对定位将其放置在主元件的顶部.

这两者一起产生五边形.我已经更改了下面代码段中的边框颜色,以便您可以直观地看到它.

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

我该如何反转它？

一旦我们了解了如何创建形状,这很简单.

• 改变梯形,使底部宽于顶部.也就是说,make border-bottom为100px并将其颜色设置为#abefcd.更改border-top为0px.颜色border-top无关紧要,因为它无论如何都是0px宽.
• 类似地,对于三角形部分,将border-top70px及其颜色设置为#abefcd.将更border-bottom改为0px.这将使三角形指向下方.
• 调整该top值,使三角形(伪元素)低于梯形(高100px).