css - 具有百分比的响应式斜 Angular CSS 三 Angular 形

Question

所以我有一个奇怪的响应式设计 - 我试图通过 CSS 重新创建 2 个三 Angular 形(白色和粉红色)来覆盖照片，而无需使用图像。见照片: Responsive/Percentage CSS triangles

到目前为止，我已经很清楚如何创建覆盖照片并与背景融合的白色三 Angular 形。但是粉红色三 Angular 形是我卡住的地方，不确定如何对其进行编程.

#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

您可以使用边框来创建三 Angular 形。边框宽度是您必须根据自己的需要调整大小(我只是选择了全屏宽度)。

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;
}

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

编辑:

这是一个响应式的例子

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;
  }
}

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

希望这对您有所帮助。