斜纹带的制作方法答案

【问题标题】：How to make slanted ribbon斜纹带的制作方法
【发布时间】：2013-09-08 18:39:15
【问题描述】：

如何使用 CSS 创建如下图所示的功能区。我知道如何制作带有文本的倾斜填充框，但我在襟翼上挣扎。

【问题讨论】：

你为什么不试试这个？ css3d.net/ribbon-generator它可能对你有很大帮助..尝试探索可能性
请不要向问题伙伴添加解决方案详细信息。我已将其从问题中删除，并暂时将其添加到我自己的答案中，以确保您的更新不会丢失。如果你想让它成为不同的答案，我会将它删除。

【解决方案1】：

以下是如何执行此操作的示例。它基本上是由一个父 div 和另外两个 div 制作的，以在顶部和底部产生折叠部分。折叠部分根据需要定位。

body {
  font-size: 18px;
  color: #FFF;
}
.container {
  margin: 50px 100px;
}
.ribbon {
  position: absolute;
  width: 400px;
  text-align: center;
  background: #000;
  padding: 20px 5px 20px 5px;
  -webkit-transform: skew(1deg, -15deg);
  -moz-transform: skew(1deg, -15deg);
  -o-transform: skew(1deg, -15deg);
  -ms-transform: skew(1deg, -15deg);
  transform: skew(1deg, -15deg);
  /* Note: The best practice is to always add the un-prefixed standards version as last */
}
.ribbon_before {
  height: 25px;
  width: 50px;
  position: relative;
  border: 2px solid black;
  top: 116px;
  left: 2px;
}
.ribbon_after {
  height: 25px;
  width: 50px;
  position: relative;
  border: 2px solid black;
  top: -56px;
  left: 355px;
}

<div class="container">
  <div class='ribbon_before'>&nbsp;</div>
  <div class="ribbon">LOREM IPSUM DOLOR SIT AMET</div>
  <div class='ribbon_after'>&nbsp;</div>
</div>

Demo on CodePen

注意：同样的效果可以通过使用一个div和几个伪元素来实现，如下面的sn-p所示。

body {
  font-size: 18px;
  color: #FFF;
}
.ribbon {
  margin: 100px 100px;
  position: relative;
  width: 400px;
  text-align: center;
  background: #000;
  padding: 20px 5px 20px 5px;
  -webkit-transform: skew(1deg, -15deg);
  -moz-transform: skew(1deg, -15deg);
  -o-transform: skew(1deg, -15deg);
  -ms-transform: skew(1deg, -15deg);
  transform: skew(1deg, -15deg);
}
.ribbon:before {
  height: 25px;
  width: 50px;
  position: absolute;
  content: '';
  border: 2px solid black;
  bottom: -8px;
  left: 0px;
  -webkit-transform: skew(-1deg, 15deg);
  -moz-transform: skew(-1deg, 15deg);
  -o-transform: skew(-1deg, 15deg);
  -ms-transform: skew(-1deg, 15deg);
  transform: skew(-1deg, 15deg);
}
.ribbon:after {
  height: 25px;
  width: 50px;
  position: absolute;
  content: '';
  border: 2px solid black;
  top: -8px;
  right: 0px;
  -webkit-transform: skew(-1deg, 15deg);
  -moz-transform: skew(-1deg, 15deg);
  -o-transform: skew(-1deg, 15deg);
  -ms-transform: skew(-1deg, 15deg);
  transform: skew(-1deg, 15deg);
}

&lt;div class="ribbon"&gt;LOREM IPSUM DOLOR SIT AMET&lt;/div&gt;

OP 调整解决方案以满足他们的需求：

我稍微调整了代码以将其提升到接近“像素完美”的条件，这是最终链接http://cdpn.io/zwDir

【讨论】：

@ncubica：归咎于我的视力 :D 顺便说一句，两个样本都关闭了吗？