Full-width 具有透明背景的垂直响应三角形

Question

我在 stack overflow 上看过数百篇关于三角形的帖子。大部分需要的三角形都是小的和水平的，但我找不到我需要的。

我需要一个三角形：

垂直
全宽
从左到右
左边是 parent
响应
Transparent三角形上方和下方

通过研究 Whosebug 上的帖子，我想出了两个例子：

案例 1： 响应，但不是反式parent top/bottom：

.element {
  background-color:lightgreen;
  border:1px solid black;
  height:300px;
  width:100%;
  position:relative;
}

.overlay {
  position:absolute;
  height:100%;
  width:100%;
  background:
    linear-gradient(
      to top left,
      black,
      black 50%,
      rgba(0,0,0,0) 50%,
    rgba(0,0,0,0)) left center no-repeat,linear-gradient(
    to bottom left, 
    black, 
    black 50%, 
    #007bff 50%, 
    #007bff
  )  left center no-repeat;
  background-size:200% 100%;
}

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

如您所见，背景是黑色的。如果我把它改成transparent，它不会起作用，因为底部被黑色覆盖了，如果我把它改成transparent，蓝色会透出来（当然）。

案例 2： Transparent，但没有响应：

.element {
  background-color:lightgreen;
  border:1px solid black;
  height:300px;
  width:100%;
  position:relative;
}


.overlay2 {
  background-color:transparent;
  width: 100%;
  height:auto;
  border-left: solid 700px rgb(255,255,255);
  border-bottom: solid 150px transparent;
  border-top: solid 150px transparent;
}

<div class="element">
  <div class="overlay2"></div>
</div>

这里的问题是border-left。我必须插入一个以像素为单位的大小。这不是响应式的，因此是不可接受的。

有什么方法可以在不使用 JavaScript 的情况下完成我想做的事情吗？

Answer 1

您可以使用响应式 SVG 元素进行叠加，如下所示：

.element {
  background-color:lightgreen;
  border:1px solid black;
  height:300px;
  width:100%;
  position:relative;
}
.overlay3 {
  height: 300px
}

<div class="element">
<svg class="overlay3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50" preserveAspectRatio="none" width="100%" height="50">
  <polygon points="0,0 0,50 50,25" style="fill:#ffffff"/>
</svg>

您不必担心浏览器支持问题，它是受广泛支持的标准。 http://caniuse.com/#search=svg

Full-width 具有透明背景的垂直响应三角形

Full-width vertical responsive triangle with transparent background

html

css

shape