Html 底部的自定义边框

我想做一个底部有自定义边框的div。div应该是这样的：

因此，在左下角应该有一个箭头，而右边的部分正好是线条，应该根据宽度动态展开

我拿了一本书，试图修改它

CSS:

HTML:

但它没有给我任何边界

注意：arrow.png是我机器上本地的一个图像。

这个怎么样：

// le div
<div class='hello'>Hi there</div>

// le css
.hello {
  display: inline-block;
  height: 50px;
  border-bottom: 1px solid red;
  overflow: display;
  box-sizing: content-box;
  margin-bottom: 20px;
  position: relative;
}

.hello::after {
  content: '';
  height: 20px;
  position: absolute;
  bottom: -10px;
  left: 0px;
  right: 0px;
  background: url(http://www.charbase.com/images/glyph/11021);
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: 10px 0px;
}

---

有没有可能使它更动态，这样我就不必指定top:48px；？好的，正如@takendarkk已经提到的，当我将一些内容放入div时，箭头会移动。@user1170330啊，只需将left:0px添加到：：after style我更新了我的响应

 The border-image property specifies an image to be used as the border around an element:</p>
    <p id="borderimg1">Here, the middle sections of the image are repeated to create the border.</p>
    <p id="borderimg2">Here, the middle sections of the image are stretched to create the border.</p>

// le div
<div class='hello'>Hi there</div>

// le css
.hello {
  display: inline-block;
  height: 50px;
  border-bottom: 1px solid red;
  overflow: display;
  box-sizing: content-box;
  margin-bottom: 20px;
  position: relative;
}

.hello::after {
  content: '';
  height: 20px;
  position: absolute;
  bottom: -10px;
  left: 0px;
  right: 0px;
  background: url(http://www.charbase.com/images/glyph/11021);
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: 10px 0px;
}