具有百分比的响应式角度CSS三角形

Question

所以我有一个奇怪的响应设计 - 我试图通过CSS重新创建2个三角形（白色和粉红色），覆盖照片而不必使用图像。见照片： Responsive/Percentage CSS triangles

到目前为止，我已经非常了解如何创建覆盖照片的白色三角形并与背景融为一体......但是粉红色的三角形是我被困住的地方，不知道如何编程

#triangleWrapper {
  background-color: red;
  height: 80px;
  position: relative;
  width: 100%;
}

.triangle {
  background: linear-gradient(to right bottom, white 50%, transparent 50%);
  height: 100%;
  left: 0px;
  top: 0px;
  transform: scaleY(-1);
  width: 100%;
}

<div id="triangleWrapper">
    <div class="triangle"></div>
</div>

Answer 1

您可以使用边框创建三角形。你需要使用边框宽度来制作你想要的尺寸（我只是采用全屏宽度）。

＆＃13;

＆＃13;

body {
  margin: 0;
  background: #333;
}

.overlay {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: calc(50vw/6) 50vw;
  border-color: rgba(237, 75, 98, 0.4) rgba(237, 75, 98, 0.4) #fff #ed4b62;
}

＆＃13;

<div class="overlay"></div>

＆＃13;

＆＃13;

＆＃13;

修改

这是一个响应示例

＆＃13;

＆＃13;

body {
  margin: 0;
  background: #333;
}

.image-tri {
  position: relative;
}

.image-tri .overlay {
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: rgba(237, 75, 98, 0.4) rgba(237, 75, 98, 0.4) #fff #ed4b62;
}

@media (min-width: 80px) {
  .image-tri .overlay {
    border-width: 12.5px 40px;
  }
  .image-tri img {
    width: 80px;
    height: 25px;
  }
}

@media (min-width: 320px) {
  .image-tri .overlay {
    border-width: 50px 160px;
  }
  .image-tri img {
    width: 320px;
    height: 100px;
  }
}

@media (min-width: 960px) {
  .image-tri .overlay {
    border-width: 150px 480px;
  }
  .image-tri img {
    width: 960px;
    height: 300px;
  }
}

＆＃13;

<div class="image-tri">
  <img src="http://fiatifta.org/wp-content/uploads/2016/01/rio-de-janeiro-banner.jpg">
  <div class="overlay"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

希望这有帮助。