Css 将成型边框底部添加到剖面标题

我正在寻找一个类似下面的部分标题截图的设计。（底线）

到目前为止我能做到的

h1{
位置：相对位置；
文本对齐：居中；
宽度：100%；
}
h1：之后{
内容：''；
位置：绝对位置；
宽度：100px；
左：50%；
转化：translateX（-50%）；
-webkit转换：translateX（-50%）；
-moz变换：translateX（-50%）；
底部：0；
边框底部：3px实心#8d8f90；
}

---

它的工作原理

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

因此，我假设边框图像需要与文本长度相同，下面是一个工作示例：

div{
文本对齐：居中；
}
h1{
显示：内联块；
背景图片：url(https://ded7t1cra1lh5.cloudfront.net/media/76045/a7fdf291661d9baab9b767d833c70183ba6ee3ce/original/divider-37709_1280.png?1448468523);
高度：120px；
背景重复：无重复；
背景位置：中心；
背景尺寸：封面/*包含*/
;
}

我是头球手
我的头球很长

我想最好的办法是使用svg作为具有正确形状的边框。即使使用

：before

和

：after

也无法获得此形状，除非使用

cli路径

，但这种支持是有限的，看起来与SVG有关。否则，您将需要相当多的CSS，包含各种元素，模仿一下。@SuperDJ因为我不熟悉svg和其他东西，你能帮我解决一下吗this@GolezTrol因为我不熟悉svg和其他东西，你能帮我解决一下吗this@Lricsi根据我的经验，树立一个形象将是一个真正的混乱的反应谢谢你们的时间和解释清楚的答案。这似乎很好。但在反应灵敏的环境中，我几乎看不到碰撞。如果我无法创建svg，这将对我有很大帮助。谢谢，没问题。是的，我从谷歌抓到的随机图像会有一些冲突。使用你为这种情况准备好的图像应该有助于缓解这种情况。祝你好运。我研究了svg并完成了这项工作，但后来我发现svg的负载比我的案例中的图像还要大。所以我已经研究了你的解决方案。非常感谢。