如何反转使用 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

只需按如下所述添加一些新样式来反转您的 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>

Answer 2

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

如何反转？

一旦我们了解了形状的创建方式，做起来就非常简单了。

更改梯形，使底部比顶部宽。即，将border-bottom设置为100px，颜色设置为#abefcd。将 border-top 更改为 0px。 border-top 的颜色无关紧要，因为它无论如何都是 0px 宽。
与三角形部分类似，设置border-top为70px，颜色为#abefcd。将 border-bottom 更改为 0px。这将使三角形指向下方。
调整 top 值，使三角形（伪元素）低于梯形（100px 高）。

Answer 3

另一种方法是保留相同的代码，但像这样使用 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>

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

How to invert the pentagon created using CSS?

html

css

css-shapes