Css 如何在HTML文本块周围绘制尖边框？

我试着在一个HTML文本块周围画边框，该文本块像箭头一样指向底部（将其变成五角大楼），如下所示：

由于我不知道盒子的尺寸，不规则的边框必须和标准边框一样灵活。在尝试使用SVG和背景并放弃CSS形状（因为缺少浏览器支持）之后，我想出了一个解决方案：

我在原始框中添加了一个绝对定位的div元素，在这个

边框的三个面上画了一个规则的边框，并在
：后面的
-伪元素中添加了一个尖底作为SVG背景

.border-holder {
    position: absolute;
    z-index: -1;
    height: calc(100% - 100px);
    top: 0;
    left: 0;
    width: calc(100% + 6px);
    border-width: 3px 3px 0;
    border-style: solid; 
    border-color: #f7a522;
}

.border-holder::after {
    content: '';
    position: absolute;
    bottom: -68.5px;
    left: -1.5px;
    width: calc(100% + 3px);
    height: 70px;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-image: url("data:image/svg+xml;utf-8,%3Csvg ... %3C/svg%3E");
}

看

这可以解决一些小缺陷（浏览器在调整SVG背景大小方面不是很准确，因此边框并不总是精确匹配；高缩放级别看起来不太好）。无论如何，我有一种烦人的感觉，对于这样一个相当基本的要求，必须有一个更好的解决方案。有人知道如何使它更简单、更健壮吗？
类似的提示是：有了边框和小调整，你可以变得非常酷，第一次检查时看起来很好：我必须看看如何从不同角度计算。类似的提示是：有边框和小调整，你可以变得非常酷，第一次检查看起来不错：我必须看看如何计算不同角度的。