如何创建多边形响应式 div？

Question

我一直在尝试创建一个非矩形的布局 div，更准确地说是五边形，

我试过使用 svg，但使用 firefox 时图像没有出现，另外，另一个要求是 div 可以很好地缩放到较小的屏幕（响应），但我再次尝试使用百分比作为五边形的点，但这肯定不会让我无处可去（另外，在文本中我使用百分比作为 x 和 y，但它也无法在较小的屏幕上重新缩放），

这是我目前得到的：

polygon {
  fill: url(#image);
}

<div id="banner-shape">
  <svg width="1440px" viewBox="0 0 1440 940" preserveAspectRatio="xMinYMax meet">
          <defs>
            <pattern id='image' height='940' width='1440' patternUnits='userSpaceOnUse'>
              <image xlink:href='https://cdn.wallpapersafari.com/12/87/pzB7wF.jpg' height='940' width='1440' />
            </pattern>
          </defs>
          <g>
            <polygon points='0,0 1440,0 1440,727 503,940 0,719' />
            <text x="20%" y="5%0"  font-size="90px" fill="blue" > New MODEL! </text>
          </g>
        </svg>
</div>

Answer 1

从 <svg> 元素中删除 width 和 height 属性。
将 SVG 添加到您的页面，直接添加到 html，作为 <img> 或通过 css 背景图片。
以这种方式设置 css，以便 svg 放大到容器（父级）的宽度，这取决于您添加 svg 的方式。（f.i。background-size: 100% 如果是背景图片，width: 100% 如果是元素）

这应该可以解决问题。

Answer 2

最后，我创建了一个 div，其高度和宽度与多边形为正方形时的高度和宽度相同，并使用内联 svg clipPaths 和 firefox 的相对单位以及在 [= 上定义的 clipPath 22=] 对于 webkit 浏览器，不能让它在 iexplorer 上运行，这是我的代码

因为我需要在 div 本身中添加内容，并且还要在背景上叠加，这被证明是最好的做法

#index-banner {
  position: relative;
  height: 65.29vw;
  /*to keep aspect ratio*/
  width: 100vw;
  /*to adjust the banner to the browser window*/
  background-image: url(https://cdn.wallpapersafari.com/12/87/pzB7wF.jpg);
  background-color: #615966;
  background-blend-mode: multiply;
  position: relative;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 77.3%, 34.9% 100%, 0% 76%);
}

<svg width="0" height="0">
        <defs>
            <clipPath id="clip-index" clipPathUnits="objectBoundingBox">
                <polygon points='0,0 1,0 1,0.773 0.349,1 0,0.76 0,0' />
            </clipPath>           
        </defs>
    </svg>

<div class="section no-pad-bot valign-wrapper hide-on-med-and-down" id="index-banner" style="clip-path: url('#clip-index');">
  <div class="content of the polygonal div"></div>
</div>

如何创建多边形响应式 div？

How can i create a polygonal responsive div?

html

css

svg

responsive