css - 如何在 CSS 中创建不同 Angular 包装器

Question

如何使用 CSS 创建一个像下图所示的 Angular 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 渐变:

这也可以使用 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()两个以不同 Angular 倾斜的伪元素可以放置在法线的顶部和底部 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 的方法transforms 但这也不适合你，因为在其中添加文本非常困难。有另一种使用 CSS 的方法 clip-path但这将只能在 WebKit 浏览器中工作。