底部的自定义边框

Question

我想在底部创建一个带自定义边框的div。 div应该是这样的：

所以左下角应该有一个箭头，而右边的部分（只是直线）应该根据宽度动态扩展。

我拿了example from w3schools并尝试修改它。

CSS：

#borderimg1 {
  border-bottom: 10px solid transparent;
  padding: 15px;
  -webkit-border-image: url(arrow.png) 30 round;
  /* Safari 3.1-5 */
  -o-border-image: url(arrow.png) 30 round;
  /* Opera 11-12.1 */
  border-image: url(arrow.png) 30 round;
}

#borderimg2 {
  border-bottom: 10px solid transparent;
  padding: 15px;
  -webkit-border-image: url(arrow.png) 30 stretch;
  /* Safari 3.1-5 */
  -o-border-image: url(arrow.png) 30 stretch;
  /* Opera 11-12.1 */
  border-image: url(arrow.png) 30 stretch;
}

HTML：

 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>

但它并没有向我展示任何边界。

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

Answer 1

这个怎么样：

// 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;
}

here