重叠的三角形答案

【问题标题】：Overlapping triangles重叠的三角形
【发布时间】：2016-05-11 17:52:35
【问题描述】：

这是我试图用纯 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;
}

&lt;div class="angled_container angled_container--open-right"&gt;&lt;/div&gt;

【问题讨论】：

你可以使用渐变吗？（浏览器支持仅 IE10+）。
当然，我可以使用渐变。
我试过了，渐变没有正确出来，因为它会产生一些非常锯齿状的边缘并破坏外观。
我可能只使用 SVG。比使用所有这些元素/伪元素更简单。
您找到解决问题的方法了吗？任何答案有帮助吗？

标签： css svg css-shapes

【解决方案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;
}

&lt;div class="angled_container angled_container--open-right"&gt;&lt;/div&gt;

SVG

或者，您可以使用带有 2 个polygon elements 的内联 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>

【讨论】：

【解决方案2】：

将它们分解成三角形。这支持 IE8+。

.container {
  position: relative;
  width: 1000px;
  height: 260px;
  border-bottom: 40px solid #65abc2;
}

.grey {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-bottom: 260px solid #595959;
  border-right: 1000px solid transparent;
}

.blue {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-bottom: 260px solid #65abc2;
  border-left: 1000px solid transparent;
}

.container:after {
  content: '';
  display: block;
  position: absolute;
  bottom: -53px;
  /* included thickness of border-bottom */
  left: 50%;
  margin-left: -17px;
  width: 0px;
  height: 0px;
  border-top: 13px solid #65abc2;
  border-left: 17px solid transparent;
  border-right: 17px solid transparent;
}

<div class="container">
  <div class="grey"></div>
  <div class="blue"></div>
</div>

【讨论】：

【解决方案3】：

您可以使用 CSS triangles 完成所有操作，但我不确定它是否比您已有的更好。您需要伪元素 ::before 和 ::after 来获得底部的额外空间和迷你箭头。

div {
    width:0;
    height:0;
    margin-top:55px;
    border-top:130px solid white;
    border-right:500px solid #6DB1C3;
    border-bottom:140px solid #6DB1C3;
    border-left:500px solid #5F5F5F;
    position:relative;
}
div:before {
    content:" ";
    position:absolute;
    bottom:-170px;
    width:1000px;
    height:30px;
    left:-500px;
    background:#6DB1C3;
}
div:after {
    content:" ";
    position:absolute;
    bottom:-202px;
    left:-20px;
    width:0;
    height:0;
    border:20px solid transparent;
    border-top:12px solid #6DB1C3;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：