如何在 CSS 中创建具有重叠功能区形状的按钮？答案

【问题标题】：How to create a button with overlapping Ribbon Shape in CSS?如何在 CSS 中创建具有重叠功能区形状的按钮？
【发布时间】：2018-07-21 04:09:56
【问题描述】：

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

HTML：

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

任何帮助将不胜感激。

现在使用的 CSS 以及如何创建图片中给出的免费标签

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

【问题讨论】：

能否请你在 jsfiddle.net 上做一个你确实确定 CSS 工作的例子，并指出它目前有什么问题？
@StephanMuller 如何创建图片中的免费标签样式
我第一次理解你的问题，但你至少必须努力展示你尝试过的内容以及你遇到的问题，然后我们才会做出任何努力。
@StephanMuller 我刚刚添加了我使用的css代码
相关：stackoverflow.com/questions/7920754/…

标签： css css-shapes

【解决方案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);
}

【讨论】：

如果使用:after 设置，则不需要使用嵌套的<span>。
@Blazemonger 没错！谢谢！我需要一杯咖啡！ :) 创建另一个示例大声笑
啊，但这就是content: attr(data-something) 派上用场的地方
@Blazemonger looool 我知道......这就是为什么我删除了我的废话。你知道那些日子里睡觉很聪明......：D
@Christina 如果不调整上面的代码，IE8 将会失败！ caniuse.com/#search=rotate 但您可以使用 stackoverflow.com/questions/19176169/ie8-css-rotation data- 属性来自 HTML5，因此您需要在 CSS 中使用 content: "FREE"

【解决方案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%);
}

&lt;a href="#" data-ribbon="FREE"&gt;Submit an Ad&lt;/a&gt;

【讨论】：