全宽重叠三角形

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>

但是，当我调整 window 大小时，"cyan" 三角形有时会因为边距和旋转而出现问题。因此，我添加了一些媒体查询来根据屏幕的宽度修改旋转角度，但我觉得这有点"playing around"，并且有更好的解决方案来实现这一点。

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

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

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 & :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>

全宽重叠三角形

Full width overlapping triangles

html

css

css-shapes