如何用CSS实现自适应宽度的文章标题五边形样式？

要实现标题背景随长度自适应且下方三角形同步适配，你可以通过修改伪元素的实现方式，让三角形宽度与父容器完全匹配，同时优化容器布局逻辑。以下是两种可行的调整方案：

方案一：线性渐变实现自适应三角形 #

通过线性渐变绘制与容器等宽的三角形，无需固定尺寸，完全适配标题长度：

.pentagon {
  display: inline-flex;
  align-items: center;
  min-height: 50px;
  background-color: #b6ce52;
  position: relative;
  padding: 2px 15px;
  font-weight: bold;
}

.pentagon:before {
  content: "";
  position: absolute;
  bottom: -10px; /* 三角形高度，需与height值保持一致 */
  left: 0;
  width: 100%;
  height: 10px; /* 三角形高度 */
  background: 
    linear-gradient(to bottom right, transparent 50%, #b6ce52 50%) left,
    linear-gradient(to bottom left, transparent 50%, #b6ce52 50%) right;
  background-size: 50% 100%;
  background-repeat: no-repeat;
}

<div class="pentagon">
  <p>Title of post</p>
</div>
<div class="pentagon">
  <p>Longer title that needs to adapt the background</p>
</div>

修改说明：

• 改用inline-flex布局，让文字垂直居中更自然
• 伪元素设置width:100%，通过两个线性渐变拼接出与容器等宽的等腰三角形
• 调整bottom和height的值可修改三角形高度，两者需保持一致

方案二：Clip-path裁剪实现完整五边形 #

直接通过裁剪路径生成五边形，无需伪元素，背景自适应更简洁：

.pentagon {
  display: inline-flex;
  align-items: center;
  min-height: 50px;
  padding: 2px 15px;
  font-weight: bold;
  background-color: #b6ce52;
  /* 裁剪路径定义五边形形状 */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), 50% 100%, 0 calc(100% - 10px));
}

<div class="pentagon">
  <p>Title of post</p>
</div>
<div class="pentagon">
  <p>Longer title that needs to adapt the background</p>
</div>

修改说明：

• clip-path中的calc(100% - 10px)控制三角形高度，调整10px即可改变三角形大小
• 整个容器被裁剪为五边形，背景会自动跟随标题长度拉伸

内容的提问来源于stack exchange，提问作者Emmanuel