html - 边框图像在 css 三 Angular 形中不起作用

Question

我有这段 css 三 Angular 形代码:

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

三 Angular 形 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;
}