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

- user5397448

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`为100px，颜色为`#abefcd`，其`border-left`和`border-right`为36px，但它们是透明的。这将产生一种梯形，顶部较宽，底部较短。 - 伪元素具有70px的`border-bottom`，颜色为`#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）下方。

- Harry

Answer 2

另一种选择是保持相同的代码，但使用 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>

- Stewartside

Answer 3

只需要按照下面提供的几个样式，就可以轻松地反转您的

内容。剩余的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>

- Parixit