如何在CSS中创建具有不同角度的包装器

Question

如何使用CSS创建与下图相似的角度div？

我尝试了一些转换，但没有得到我想要的确切结果。

以下是我尝试过的代码片段：

.angledwrapper {
  width: 105%;
  float: left;
  margin-left: -13px;
  margin-top: 65px;
  -webkit-transform: rotate(-5deg);
  -moz-transform: rotate(-5deg);
  -o-transform: rotate(-5deg);
  -ms-transform: rotate(-5deg);
  transform: rotate(-5deg);
}
.mindycontentwrap {
  width: 100%;
  float: left;
  background: #777;
}
.angledcontent {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  float: left;
  min-height: 200px;
  width: 67%;
}
.angledwrapbottom {
  width: 100%;
  float: left;
  background: #777;
  -webkit-transform: rotate(-5deg);
  -moz-transform: rotate(-5deg);
  -o-transform: rotate(-5deg);
  -ms-transform: rotate(-5deg);
  transform: rotate(-5deg);
}
.angledtop {
  width: 105%;
  float: left;
  background: #777;
  -webkit-transform: rotate(-5deg);
  -moz-transform: rotate(-5deg);
  -o-transform: rotate(-5deg);
  -ms-transform: rotate(-5deg);
  transform: rotate(-5deg);
}
.Jane {
  position: relative;
  max-width: 30%;
  float: left;
}

<div class="musicwrap_container">
  <div class="angledwrapper">
    <div class="angledtop"></div>
    <div class="mindycontentwrap">
      <img src="xxxxx/images/Jane.png" title="Jane" alt="Jane" class="Jane">
      <div class="angledcontent"></div>
    </div>
    <div class="angledwrapbottom"></div>
  </div>
</div>

Fiddle Demo

有什么想法吗？

Answer 1

这种形状可以通过多种方式创建，这个答案涵盖了其中的一些。每种方法的优缺点与this answer中描述的方法非常相似。

使用CSS Gradients：

这也可以使用linear-gradient背景图片来完成。该方法与变换相同，只是这里所需大小的background-image放在顶部和底部而不是额外（真实/伪）元素。

div {
  position: relative;
  padding: 55px 4px 125px;  /* important for space at top and bottom */
  background: linear-gradient(to top left, firebrick 49.5%, transparent 50.5%), linear-gradient(firebrick, firebrick), linear-gradient(to bottom right, firebrick 49.5%, transparent 50.5%);
  background-size: 100% 50px, 100% calc(100% - 175px), 100% 125px;  /* Y axis value controls height of angled parts */
  background-repeat: no-repeat;
  background-position: 0px 0px, 0% 50px, 0% 100%;
  min-height: 250px;
}

<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
  software like Aldus PageMaker including versions of Lorem Ipsum.</div>

使用SVG：

这也可以通过使用SVG path元素创建形状并将其完全放在容器后面来创建。

div {
  position: relative;
  padding: 50px 4px 125px;  /* important for space at top and bottom */
  min-height: 250px;
}
div svg {
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
  z-index: -1;
}
path {
  fill: firebrick;
}

<div>
  <svg viewBox='0 0 800 800' preserveAspectRatio='none'>
    <path d='M0,40 L800,0 800,690 0,800z' />
  </svg>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
  software like Aldus PageMaker including versions of Lorem Ipsum.</div>

注意：以下代码段是原始答案的一部分，但不建议使用具有动态宽度的容器。当width增加时，偏斜会产生麻烦。以全屏模式打开以下代码段以查看问题。

使用transform: skewY()两个以不同角度倾斜的伪元素可以放置在普通div的顶部+底部，以创建所需的外观。

div {
  position: relative;
  margin: 60px 4px 120px;  /* important to push element and leave space for angled parts */
  padding: 4px;
  background: firebrick;
  min-height: 150px;
}
div:after,
div:before {
  position: absolute;
  content: '';
  width: 100%;
  background: firebrick;
  backface-visibility: hidden;
  z-index: -1;
}
div:before {
  top: 0px;
  left: 0px;
  height: 100%;
  transform-origin: left top;
  transform: skewY(-4deg);
}
div:after {
  bottom: 0px;
  left: 0px;
  height: 100%;
  transform-origin: right bottom;
  transform: skewY(-10deg);
}

<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
  software like Aldus PageMaker including versions of Lorem Ipsum.</div>

Here是使用perspective转换的另一种方法，但这也不适合您，因为在其中添加文本非常困难。有 另一种使用CSS clip-path的方法，但 仅适用于WebKit浏览器 。