我如何創建一個多邊形響應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？

回答

相關問題