边框图像在css三角形中不起作用

Question

我有这个css三角形的代码：

HTML：

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="inner">
                <div class="triangle"></div>
            </div>
        </div>
    </div>
</div>

CSS：

.triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 100px 500px 0 500px;
    border-color: #009999;
    -webkit-border-image: url('http://kinderhtml.themerex.net/img/bg/texture_2.png');
    /* Safari 3.1-5 */
    -o-border-image: url('http://kinderhtml.themerex.net/img/bg/texture_2.png');
    /* Opera 11-12.1 */
    border-image: url('http://kinderhtml.themerex.net/img/bg/texture_2.png');
}

但在行动中，边框图像不起作用！怎么解决这个问题?！

DEMO

Answer 1

三角形https://jsfiddle.net/mckyep43/

HTML

<div class="triangle"></div>

CSS

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 100px 150px 100px;
  border-color: transparent transparent #000000 transparent;
}