Using CSS Pseudo-Selectors to achieve a ribbon shape

Question

i have the following structure where multiple elements within a carousel have a numbered badge, the white part above works fine when using white background, but in some situations an image gets behind the badge. Is it possible to make the same effect but with a transparent white space below?

Here is the HTML code

<p class="mostwanted"><strong>1</strong></p>

CSS code

.mostwanted {
  width: 80px;
  height: 56px;
  padding-top: 5px;
  position: absolute; 
  background: #ffc909;
  color: white;
  font-size: 25px;
  text-align: center;
  font-family: 'Viga', sans-serif;
  top: 2px;
  right:17px;
  z-index: 10;
}
.mostwanted:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-bottom: 13px solid #fff;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
}

Sample Fiddle

JsFiddle

Thanks in advance.

Answer 1

Pretty straightforward.

JSFiddle Example

All we're doing is swapping your border triangle's sides.

This CSS:

border-bottom: 13px solid #fff;
border-left: 40px solid transparent;
border-right: 40px solid transparent;

Becomes this:

border-bottom: 13px solid transparent;
border-left: 40px solid #ffc909;
border-right: 40px solid #ffc909;

And then just move it to outside the div, like so:

.mostwanted:after {
...
  bottom: -13px
...
}

Alternate

Another way to do this would be to use two pseudos for the ribbon frill:

.mostwanted:after, .mostwanted:before {
  content: "";
  position: absolute;
  bottom: -13px;
  width: 0;
  height: 0;
}
.mostwanted:after {
  left: 40px;
  border-bottom: 13px solid transparent;
  border-right: 40px solid #ffc909;
}
.mostwanted:before {
  left:0;
  border-bottom: 13px solid transparent;
  border-left: 40px solid #ffc909;
}

JSFiddle for alternate

You'll notice the aliasing is better (in Chrome at least) for the second option. I'd give you an explanation, but I can't be 100% sure exactly why that is. My educated guess would be that one is rendering a border joinder while the other is rendering what would ostensibly be an element edge.