Featured filled corner css

Question

I'm trying to add a triangle with a star in it at the corner of an article in Joomla.

This is my code:

Html

<div class="ribbon-wrapper-featured">
  <div class="ribbon-featured">
    <i class="fa fa-star"></i>
  </div>
</div>

Css

/*corner ribbon*/
.ribbon-wrapper-featured {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0px;
    right: 0px;
}

.ribbon-featured {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 50px 50px 0;
    border-color: transparent #f1c40f transparent transparent;
    line-height: 0px;
    _border-color: #000000 #f1c40f #000000 #000000;
    _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}

But this is what I'm getting

I'm not very good in CSS so if you have a more efficient way to achieve this, it is very welcome.

Answer 1

Ok, using Paulie-D's answer (Thanks!) and doing this. (Because copy-paste the answer didn't work)

HTML

<div class="ribbon-wrapper-featured"><div class="featured fa fa-star"></div></div>

CSS

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

.featured.fa {
    width: 100px;
    height: 100px;
    display: block;
    position: absolute;
    top: 20px;
    right: -30px;
}
.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;
    right: 0;
    border-width: 20px;
    border-style: solid;
    border-color: darkorange darkorange transparent transparent;
    z-index: 1;
}

Answer 2

Your problem is that you're trying to place a pseudo-element into a div with no height or width...so it won't fit.

If you position two pseudo-elements, the first being the Font Awesome ::before and the second the triangle background I think you get more control.

You can swap out the icon, color it how you like and you also have control of the background independent of everything else.

Something like this:

.featured.fa {
  width: 100px;
  height: 100px;
  margin: 2em auto;
  border: 1px solid grey;
  display: block; /* needed to override FA styling */
  position: relative;
}
.featured.fa::before {
  position: absolute;
  right: 0%;
  top: 0;
  margin: .25em;
  color: gold;
}
.featured::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  top: 0;
  right: 0;
  border-width: 20px;
  border-style: solid;
  border-color: darkorange darkorange transparent transparent;
  z-index: -1;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="featured fa fa-star"></div>