Question

我已经看到数百个有关三角形的堆栈溢出的帖子。所需的大多数三角形都是小而水平的，但我找不到我需要的东西。

我需要一个三角形：

垂直
全宽
从左到右
Leftside是父母的全身
响应
三角形上方和下方透明

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

案例1：响应但不透明的上/下：

.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>

如您所见，背景为黑色。如果我将其更改为透明，它将无法工作，因为底部被黑色覆盖，如果我将其透明，蓝色将通过（当然）。

案例2：透明但无响应：

.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>

这里的问题是边界左边。我必须以像素为单位插入大小。这没有反应，因此是不可接受的。

有没有办法在不使用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

具有透明背景的全宽垂直响应三角形

1 个答案: