Banner with angled shapes

Just helping you out with this as you've tried but it didn't worked as you expected... So basic idea is that we can use CSS pseudo elements to create that effect..

.wrapper {
  background: #C3C3C3;
  padding: 20px;
  font-size: 40px;
  font-family: Arial;
  text-align: center;
  position: relative;
}

.wrapper:after {
  content: "";
  width: 0;
  height: 0;
  border-top: 42px solid transparent;
  border-bottom: 42px solid transparent;
  border-right: 40px solid white;
  position: absolute;
  right: 0;
  top: 0;
}

<div class="wrapper">TEXT HERE</div>

Here, am doing nothing fancy, we are using a pseudo element i.e nothing but a virtual element which doesn't exist in the DOM but we can insert it using CSS and positioning that pseudo element to the right side of your wrapper. This will help you get the ribbon like end. Note that the color of the triangle is hard coded and it's not transparent.

Try this it works

.wrapper {
  font-family: arial;
  font-size: 12px;
  color: white;
  background-color: black;
  border: 1px solid white;
  padding: 8px;
  width: 100px;
  text-align: center;
  position: relative;
}
.wrapper:after {
  content: '';
  position: absolute;
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  border-right: 16px solid white;
  z-index: 10;
  top: 0px;
  right: 0px;
}

<div class="wrapper">TEXT HERE</div>

here is the fiddle. https://jsfiddle.net/nileshmahaja/s5egaebr/

I have used :after selector to the wrapper div.

CSS

.wrapper {
  padding: 0 50px;
  font-size: 0px;
  line-height: 0%;
  width: 0px;
  height:120px;
  background:#ddd;
  position:relative;
  width:500px;
}

.wrapper:after {
  content:'';
  width: 0px;
  height: 0px;
  border-top: 60px solid transparent;
  border-bottom: 60px solid transparent;
  border-right: 60px solid #fff;
  position:absolute;
  right:0
}