如何制作倾斜的缎带

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