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

Question

我试图围绕一个HTML文本块绘制边框，该文本块的箭头指向底部（将其转换为五边形），如下所示：

由于我不知道盒子的尺寸，不规则边框必须像标准边框一样灵活。在尝试了一些使用SVG和背景的东西并因缺乏浏览器支持而丢弃CSS Shapes后，我提出了一个解决方案：

我在原始框中添加了一个绝对定位的div元素，在三个边上围绕此border-holder绘制了一个常规边框，并将指向底部作为SVG背景添加到::after - 伪元素。

.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");
}

请参阅http://codepen.io/wortwart/pen/YWvQWX

这适用于一些小缺陷（浏览器在调整SVG背景的尺寸方面不是很准确，因此边框并不总是完全适合;高缩放级别看起来不太好）。无论如何，我有一种唠叨的感觉，必须有一个更好的解决方案来满足这样一个相当基本的要求。有人知道如何使这更简单，更健壮吗？