html - 背景アイコンで CSS ボーダーを分割する

Question

背景画像でボーダーを分割しようとしています。これがこの方法で可能かどうかはわかりません。うまくいけば、誰かがこれを達成するための良いクリーンな方法を見つけ出すのを手伝ってくれるでしょう。

私は一番下のものを手に入れようとしていて、その一番上のものは私が今持っているものです。

.tinybanner h1 {
    padding-bottom: 0.5em;
    margin-bottom: 50px;
    border-bottom: 1px solid $green;
    display: inline-block;
    @include adjust-font-size-to(24px);
    background: url('images/tinybanner.png') center bottom no-repeat;
}