css - 双梯形

我要弄乱这个双梯形的形状在网页上的想法。下面显示的CSS类创建了可以复制和旋转的梯形，但是我要确保如何将其扩展到浏览器的整个宽度并使其响应。

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

最佳答案

您可以检查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>

关于css - 双梯形，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45151875/