重叠的三角形

Question

这是我试图在纯CSS中创建的形状:

我有一个更完整的jsfiddle http://jsfiddle.net/8Lxr5s57/7/.是否有更好,更有效的方法来实现同样的结果？

.angled_container {
  background-color: #fff;
  height: 200px;
  position: relative;
  overflow: hidden;
  clear: both;
}
.angled_container:before,
.angled_container:after {
  content: "";
  width: 110%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
}
.angled_container:before {
  background-color: #606060;
  transform: rotate(12deg);
  -webkit-transform-origin: left top;
  left: 0;
}
.angled_container:after {
  background-color: #6bb2c6;
  transform: rotate(-12deg);
  -webkit-transform-origin: right top;
  left: -10%;
}
.angled_container--open-left:before {
  background-color: #6bb2c6;
  z-index: 2;
}
.angled_container--open-left:after {
  background-color: #606060;
  z-index: 1;
}

<div class="angled_container angled_container--open-right"></div>

Answer 1

CSS

我建议使用skewY()而不是rotate()两个三角形.它将避免一些定位问题,并防止使用比容器更宽的伪元素:

.angled_container {
  height: 200px;
  position: relative;
  overflow: hidden;
}
.angled_container:before,
.angled_container:after {
  content: "";
  width: 100%; height: 100%;
  display: block;
  position: absolute;
  top: 0; left: 0;
}
.angled_container:before {
  background-color: #606060;
  transform: skewY(12deg);
  transform-origin: left top;
}
.angled_container:after {
  background-color: #6bb2c6;
  transform: skewY(-12deg);
  transform-origin: right top;
}

<div class="angled_container angled_container--open-right"></div>

SVG

或者,您可以使用带有2个多边形元素的内联SVG .这是完全响应并且可能更容易制作/维护,因为您可以使用fill属性在CSS中设置三角形的样式:

svg{display:block; width:100%;}
.first{
  fill:#606060;
}
.second{
  fill:#6bb2c6;
}

<svg viewbox="0 0 100 30">
  <polygon class="first" points="0 0 100 28 0 25 0 28"/>
  <polygon class="second" points="0 28 0 25 100 0 100 28 52 28 50 30 48 28 0"/>
</svg>