ポリゴン応答ディビジョンを作成するにはどうしたらいいですか？

Question

私は非矩形のdivでレイアウトを作成しようとしてきた、その五角形は、より正確には、

私は、SVGを使って試してみただけでなく、Firefoxを使用したときに画像が表示されない、1他の要件は、より小さいスクリーン（応答性）にうまくスケールするdivのためですが、再び、ペンタゴンのポイントとしてパーセンテージを使用しようとしましたが、確かに私をどこにも連れて行っていませんでした（また、テキストでは、

HTML

を：と）Yが、それはまた、小さな画面で再スケールに失敗し、ここ

は、私がこれまで持っているものです

<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

最後に、ポリゴンが正方形であった高さと幅のdivを作成し、インラインsvg clipPathsをfirefoxの相対単位で使用し、webPathブラウザのcssで定義されたclipPathを使用しました。 tは実際にそれが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要素自体の内部コンテンツを追加し、また、背景の上にオーバーレイを置くために必要なので、これは多分、このポストヘルプあなたhttps://www.smashingmagazine.com/アクション

Answer 2

1. が<svg>要素からwidthとheight属性を削除します。
2. SVGをあなたのページに直接追加するか、<img>のようにhtmlに直接入れるか、CSSの背景イメージを使用します。
3. svgがコンテナ（親）の幅に合わせて拡大されるように、CSSを設定します。どのようにsvgを追加したかによって異なります。

これは、トリックを行う必要があり（それは要素がある場合、それは背景画像又はwidth: 100%ある場合background-size: 100%をf.i.）。