Html 模拟底部css的压力边界

这个css给出了如下边框底部

我想要的是

在css中有什么方法可以做到这一点吗

试试这个

.压力{ 宽度：100px； 文本对齐：居中； 边框：5px000； 边界半径：50%/60%； }

---

看一看。它产生类似的针形。其中一个需要一个rotateY和rotateZ，你的形状需要一个rotateX和rotateZ。我已经用一个类似于这个问题中形状的片段更新了另一个线程。我不想把它贴在这里，因为它看起来像是我在复制答案。所以没有办法设计边框底部本身。我们必须使用单独的div，比如@HarryNo是我个人意识到的一种方式。也许一些带有边框图像和/或渐变的复杂内容会有所帮助，但这会降低浏览器的支持率。这是向上弯曲的。如何使它像图中一样笔直？

.pressure{
    width: 100px;
    text-align: center;
    border-bottom: 3px solid #000;
}