全宽重叠三角形

Question

我目前需要使用CSS看起来像这样：

我设法做到了这一点：

.top {
  position: relative;
}
.top .gray-bar {
  position: absolute;
  width: 100%;
  height: 50px;
  background-color: #cdcbcc;
  -ms-transform: rotate(1.2deg);
  transform: rotate(1.2deg);
  margin-top: -25px;
  z-index: 2;
}
.top .cyan-bar {
  position: absolute;
  width: 100%;
  height: 90px;
  background-color: #2ca1ab;
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
  z-index: 1;
  margin-top: -30px;
  margin-left: -400px;
}
.top .purple-bar {
  position: absolute;
  width: 100%;
  height: 50px;
  background-color: #b71e4c;
  -ms-transform: rotate(0.7deg);
  transform: rotate(0.7deg);
  margin-top: -5px;
  z-index: 0;
}

<div class="top">
  <div class="gray-bar"></div>
  <div class="cyan-bar"></div>
  <div class="purple-bar"></div>
</div>

但是，当我调整窗口大小时，在某些时候，由于边距和旋转，“青色”三角形会引起问题。因此，我添加了一些媒体查询来根据屏幕的宽度修改旋转角度，但我觉得它有点“玩”并且有更好的解决方案来实现这一点。

我尝试使用边框来制作重叠的三角形，但因为它不能表示为百分比，所以我有点卡住了。实际上，目标是无论用户的屏幕分辨率如何，结果看起来都是一样的。

有没有比我更好的解决方案？

Answer 1

考虑到.top元素使用完整视口宽度，您可以使用viewport percentage units作为边框。这将使三角形相对于视口宽度 请参阅此示例，其中包含一个div：

body,html{margin:0;padding:0;}

.topBar{
  position:relative;
  height:35px;
  border-bottom:30px solid transparent;
  border-right:100vw solid #B71E4C;   
}
.topBar:before, .topBar:after{
  content:'';
  position:absolute;
  top:0; left:0;
  height:15px;
}
.topBar:before{
  border-bottom:50px solid transparent;
  border-left:100vw solid #2CA1AB;
}
.topBar:after{
  border-bottom:40px solid transparent;
  border-right:100vw solid #CDCBCC;   
}

<div class="topBar"></div>

Answer 2

也许这有助于你，但是，@ web-tiki是最好的解决方案，使用伪选择器：:before＆amp; :after

.top {
  overflow: hidden;
  height: 90px;
}
.top .gray-bar {
    position: relative;
    width: 100%;
    height: 50px;
    background-color:#cdcbcc;
    -ms-transform: rotate(1.3deg);
    transform: rotate(1.3deg);
    margin-top:-35px;
    z-index: 2;
}

.top .cyan-bar {
    position: relative;
    width: 150%;
    height: 50px;
    background-color:#2ca1ab;  
    -ms-transform: rotate(-2deg);
    transform: rotate(-2deg);
    z-index:1;
    top: -5px;
    margin-top:-30px;
    margin-left:-100px;
}

.top .purple-bar {
    position: relative;
    width: 100%;
    height: 20px;
    background-color:#b71e4c;   
    -ms-transform: rotate(0.7deg);
    transform: rotate(0.7deg);
    margin-top: -20px;
    z-index:0;
}

<div class="top">
    <div class="gray-bar"></div>
    <div class="cyan-bar"></div>
    <div class="purple-bar"></div>
</div>