在节标题上添加一个有底边的形状

Question

我正在寻找一种设计，如以下屏幕截图所示。 （最重要的）

到目前为止，我可以实现

h1 {
  position: relative;
  text-align: center;
  width: 100%;
}

h1:after {
  content: '';
  position: absolute;
  width: 100px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  bottom: 0;
  border-bottom: 3px solid #8d8f90;
}

<h1 style="text-transform: none">How it works</h1>

现在我要对border-bottom的两端进行整形。

Answer 1

根据评论要求使用响应式背景图像的示例！

因此，我假设边框图像的长度必须与文本的长度相同，这是一个有效的示例：

div {
  text-align: center;
}

h1 {
  display: inline-block;
  background-image: url(https://ded7t1cra1lh5.cloudfront.net/media/76045/a7fdf291661d9baab9b767d833c70183ba6ee3ce/original/divider-37709_1280.png?1448468523);
  height: 120px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover/*contain*/
  ;
}

<div>
  <h1 id="_1">I am a header</h1>
</div>

<div>
  <h1 id="_2">I am a really really really really long header</h1>
</div>

因此，在这个示例中，我从Google抓取了一个很大的图像作为示例，因此不会在较大的屏幕尺寸上被拉伸。文本中断时，您将需要使用@media screen命令更改标题标签的高度。但是，仅在较长的标题上，并且标题边框的长度必须与文本的长度相同时，才需要这样做。如果不是这样，您可以使用更短的图像，并可能将封面的大小更改为包含在内。内联块使它成为背景图像也始终是文本的长度。

如果您决定走这条路线，对CSS进行一些细微调整应会产生可接受的结果。希望这对备份解决方案Ramesh有帮助！