如何制作倾斜的缎带

Question

如何使用CSS创建类似下图的功能区。我知道如何制作带有文字的倾斜填充盒子，但是我很挣钱。

这是codepen link

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>

Demo on 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