Adding a featured corner to panel heading in Bootstrap - html

Question

I am trying to add a small triangle border in the panel corners of the panel headings.
I was able to add one using this example :
Featured filled corner css
I had to make minor changes to bring it to the left. But it only "kinda" works. It wont stick on changed resolutions though.
On changed resolutions it looks like this:
My Code for the Panel:
<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>
Thanks!

Answer 1

I haven't been able to check against different resolutions, and there might be improvements possible on the triangle:
.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>
Source for making triangles: https://css-tricks.com/snippets/css/css-triangle/