html - 斜纹带的制作方法

Question

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

这是codepen链接

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

CodePen 上的演示

---

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

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

<div class="ribbon">LOREM IPSUM DOLOR SIT AMET</div>

---

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

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