在Bootstrap中将特征角添加到面板标题

Question

我正在尝试在面板标题的面板角落添加一个小三角形边框。

我可以使用此示例添加一个：

Featured filled corner css

我必须做一些小修改才能把它带到左边。但它只是＆＃34;有点＆＃34;作品。它不会坚持改变决议。

更改后的分辨率看起来像这样：

我的小组代码：

 <div class="col-lg-6">
            <div class="panel">
                <div class="ribbon-wrapper-featured">
                    <div class="featured fa"></div>
                </div>
                <div class="panel-heading">

                    <h3 class="panel-title">Select Activity Stream</h3>
                </div>
                <div class="panel-body">
                </div>
            </div>

        </div>

CSS：

  <style>
        /*corner ribbon*/
        .ribbon-wrapper-featured {
            position: absolute;
            top: -50px;
            right: 0px;
        }

        .featured.fa {
            width: 100px;
            height: 100px;
            display: block;
            position: absolute;
            top: 50px;
            right: 10px;
        }

            .featured.fa::before {
                position: absolute;
                right: 0%;
                top: 0;
                margin: .25em;
                color: gold;
                z-index: 2;
            }

        .featured::after {
            content: '';
            position: absolute;
            /* width: 0; */
            /* height: 0; */
            /* top: 0; */
            left: -38.4em;
            border-width: 20px;
            border-style: solid;
            border-color: #03a9f4 transparent transparent #03a9f4;
            /* outline: auto; */
            z-index: 1;
        }

        .panel-title {
            background-color: #232323;
            text-transform: uppercase;
            font-family: 'Open Sans Condensed', sans-serif;
            color: #03a9f4;
            font-size: 1.5em;
            padding: 0 20px 0 60px;
        }
    </style>

谢谢！