我如何创建一个多边形响应div？

我一直在试图创建一个非矩形div的布局，其五角形更精确，我如何创建一个多边形响应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); 
    }

来源

2016-08-15 Juan

也许这篇文章可以帮助您https://www.smashingmagazine.com/ 2015/05 /创建响应形状与剪辑路径/ –

您的CSS文件不包含与ID图像的元素，这是在HTML文件中，因此您不能在CSS文件中写入本地引用。 –

最后，我创建了一个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本身里面，也提上了背景的覆盖，这被证明是最好的行动当然

来源

2016-08-21 17:44:08 Juan

从<svg>元件取出width和height属性。
将SVG添加到您的页面中，可以直接输入html，如<img>或通过css背景图像。
以这种方式设置css，这样svg就会被放大到容器的宽度（父），这取决于您添加svg的方式。（f.i. background-size: 100%如果是背景图像或width: 100%如果它是一个元素）

这应该可以解决问题。

来源

2016-08-15 08:46:14 philipp

我如何创建一个多边形响应div？

回答

相关问题