How to create a button with overlapping Ribbon Shape in CSS?

Question

I am trying to create a button like the one shown in the picture. A rectangular box with a tag.

HTML:

<ul class="nav navbar-nav">
    <li class="active"><a href="#main-slider">POST FREE Ad</a></li>
</ul>

Any help would be appreciated.

CSS am using now and how do I create a tag like free given in the picture

.navbar-default {
    background: #fff;
    border-radius: 0 0 5px 5px;
    border: 0;
    padding: 0;
    -webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 3px 0 rgba(0,0,0,.2);
    box-shadow: 0 1px 3px 0 rgba(0,0,0,.2);
    overflow: hidden;
}
.navbar-default .first a {
    border-radius: 0 0 0 5px;
}
.navbar-default .navbar-brand {
    margin-right: 50px;
    margin-left: 20px;
    width: 175px;
    height: 78px;
    background: url(../images/logo.png) no-repeat 0 50%;
}
.navbar-default .navbar-nav > li {
    margin-left: 0.5px;
}
.navbar-default .navbar-nav > li > a {
    padding: 25px 25px;
    font-size: 13px;
    line-height: 18px;
    color: #999;
}
.navbar-default .navbar-nav > li > a > i {
    display: inline-block;
}
.navbar-default .navbar-nav > li.active > a,
.navbar-default .navbar-nav > li.active:focus > a,
.navbar-default .navbar-nav > li.active:hover > a,
.navbar-default .navbar-nav > li:hover > a,
.navbar-default .navbar-nav > li:focus > a,
.navbar-default .navbar-nav > li.active > a:focus,
.navbar-default .navbar-nav > li.active:focus > a:focus,
.navbar-default .navbar-nav > li.active:hover > a:focus,
.navbar-default .navbar-nav > li:hover > a:focus,
.navbar-default .navbar-nav > li:focus > a:focus {
    background-color: #52b6ec;
    color: #fff;
}

Answer 1

Here is another idea using linear-gradient to create the shape:

[data-ribbon] {
  position: relative;
  display: inline-block;
  padding: 20px 26px;
  background: #FF7700;
  text-align: center;
  color: #fff;
  text-decoration: none;
}

[data-ribbon]:after {
  content: attr(data-ribbon);
  position: absolute;
  right: 0;
  top: 0;
  display: inline-block;
  padding: 2px 25px;
  background: 
    linear-gradient(to top right, gold 49%, transparent 50%) right/20px 100% no-repeat, 
    linear-gradient(to top left, gold 49%, transparent 50%) left/20px 100% no-repeat, 
    linear-gradient(gold, gold) center/calc(100% - 40px) 100% no-repeat;
  color: #fff;
  transform: rotate(45deg) translate(26%, -60%);
}

<a href="#" data-ribbon="FREE">Submit an Ad</a>

Answer 2

jsBin Demo

A quick introduction, what it takes to create a <span class="ribbon">FREE</span> ribbon shape?:

.ribbon{
  display:inline-block;
  height:0;
  border-bottom:20px solid gold;
  border-left:20px solid transparent;
  border-right:20px solid transparent;
}

Now, using a single <a> element (thanks @Blazemonger for the reminder) let's send that shape to the :after pseudo, adding position, rotation....:

<a href="#" data-ribbon="FREE">Submit an Ad</a>

[data-ribbon]{
  position:relative;
  display:inline-block;

  padding:20px 26px;
  background:#FF7700;
  text-align:center;
  color:#fff;
  text-decoration: none;
}

[data-ribbon]:after{
  content: attr(data-ribbon);
  position:absolute;
  top: 6px;
  right:-22px;

  height:0;
  border-bottom: 20px solid gold;
  border-left:   20px solid transparent;
  border-right:  20px solid transparent;
  transform: rotate(45deg);
}