如何在CSS中创建具有重叠Ribbon Shape的按钮？

Question

我正在尝试创建一个如图所示的按钮。带标签的矩形框。

HTML：

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

任何帮助将不胜感激。

CSS现在正在使用，如何在图片中创建像free一样的标签

.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

<强> jsBin Demo

快速介绍，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;
}

现在，使用单个<a>元素（感谢@Blazemonger提醒）让我们将该形状发送到:after伪，添加位置，旋转....：

<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);
}

Answer 2

这是使用linear-gradient创建形状的另一个想法：

[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>