Добавление рекомендуемого угла к заголовку панели в Bootstrap

Question

Я пытаюсь добавить небольшую треугольную границу в углах панели заголовков панели.

Я смог добавить один, используя этот пример:

Избранный заполненный угол css

Мне пришлось внести небольшие изменения, чтобы привести его влево,Но это только "своего рода" работает.Однако он не будет зависеть от измененных разрешений.

Для измененных разрешений это выглядит так:

Мой код для панели:

 <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>

Спасибо!

Answer 1

Я не смог проверить по разным разрешениям, и в треугольнике возможны улучшения:

.wrapper {
    background-color: #ddd;
    height: 30px;
}
.panel-heading {
    height: 0;
    width: 0;
    border-bottom: 30px solid transparent;
    border-left: 30px solid blue;
    float: left;
}
h3 {
    line-height: 30px;    
}

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

Источник для создания треугольников: https://css -tricks.com / snippets / css / css-triangle /