用 CSS 实现这个五边形的最佳方法是什么？

Question

我正在尝试用 CSS 进行此设计，因为我将放置一个网站和每个帖子的标题，根据其长度，背景会适应，但我希望下面的三角形也能这样做，所以我仍然不能去做。

\n

\n

到目前为止，我已经成功地用 CSS 做了类似的事情。这是我的代码：

\n

\r\n

\r\n

.pentagon {\n  display: inline-block;\n  width: fit-content;\n  min-width: 50px;\n  min-height: 50px;\n  background-color: #b6ce52;\n  position: relative;\n  padding: 2px 10px 2px 10px;\n  font-weight: bold;\n}\n\n.pentagon:before {\n  content: "";\n  position: absolute;\n  bottom: -10px;\n  left: 50%;\n  transform: translateX(-50%) rotate(360deg);\n  border-left: 20px solid transparent;\n  border-right: 20px solid transparent;\n  border-top: 20px solid #b6ce52;\n}

\r\n

<div class="pentagon">\n  <p>Title of post</p>\n</div>

\r\n

\r\n

\r\n

\n

我如何调整我的代码或者我必须添加什么值 \xe2\x80\x8b\xe2\x80\x8b 才能实现示例布局？我将非常感谢你的帮助。

\n

Answer 1

我认为你可以通过使用clip-path（多边形）CSS属性来解决你的问题。

.pentagon {
  display: inline-block;
  width: fit-content;
  width: auto;
  height: auto;
  clip-path: polygon(50% 60%, 100% 50%, 100% 0%, 0% 0%, 0% 50%);
  background-color: #b6ce52;
  position: relative;
  padding: 2px 10px;
  font-weight: bold;
}
.pentagon p {
  line-height: 0;
  font-size: 45px;
  margin-bottom: 50%;
}

<div class="pentagon">
  <p>Title of post</p>
</div>

您可以在这里找到带有示例的文档： https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

这是一个有用的剪辑路径生成器： https ://10015.io/tools/css-clip-path-generator