Question

我一直试图创建一个非矩形div的布局，它的五边形更精确，

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

这是我到目前为止所得到的：

HTML

  <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='http://lorempixel.com/output/nightlife-q-g-1440-940-2.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>

CSS

polygon {
    fill: url(#image);
  }

Answer 1

从width元素中删除height和<svg>属性。
将SVG添加到您的页面，直接导入html，<img>或通过css背景图像。
以这种方式设置css，以便svg扩展到容器（parent）的宽度，这取决于你添加svg的方式。（如果是背景图片，则为background-size: 100%;如果是背景图片，则为width: 100%

这应该可以解决问题。

Answer 2

最后，我创建了一个div，其高度和宽度是多边形所具有的正方形，并使用内联svg clipPaths和firefox的相对单位以及在css上为webkit浏览器定义的clipPath，真的让它在iexplorer上工作，这是我的代码

HTML

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

CSS

#index-banner {
position: relative;
height: 65.29vw; /*to keep aspect ratio*/
width: 100vw; /*to adjust the banner to the browser window*/
background-image: url(public/index-banner.png);
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%);

}

由于我需要在div中添加内容，并在背景上添加叠加层，这被证明是最好的行动方案

如何创建多边形响应div？

2 个答案: