双梯形状

Question

我在网页上获得这样的双梯形形状让我不知所措。下面看到的CSS类创建了一个可以复制和转换的梯形，但我确保如何将其扩展到浏览器的整个宽度并使其响应。

.warpedbanner {
    border-right: 150px solid red;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    height: 4em;
    width: 4px;
}

Answer 1

您可以检查LINK的形状。

div {
  width: 400px;
  height: 150px;
  clip-path: polygon(50% 0%, 100% 15%, 100% 84%, 50% 100%, 0 85%, 0 18%);
  background-color: red;
}

<div></div>

以上代码段可以在Chrome中使用，但不适用于FireFox。在两个浏览器中都有效的代码段在下面给出

div {
  width: 400px;
  height: 150px;
  background-color: red;
  -webkit-clip-path: url("#clipping");
  clip-path: url("#clipping");
}

<div></div>
<svg width='0' height='0'>
  <defs>
    <clipPath id="clipping" clipPathUnits="objectBoundingBox">
      <polygon points="0 0.25, 0.5 0, 1 0.25,  1 0.75, 0.5 1,0 0.75"  />
    </clipPath>
  </defs>
</svg>