Wie kann ich ein polygonales reaktives div erstellen?

Question

Ich habe versucht, ein Layout mit einem nicht-rechteckigen div zu erstellen, ist ein Fünfeck, um genauer zu sein,

Ich habe versucht, mit Svg, aber das Bild erscheint nicht, wenn Firefox, auch, ein andere Voraussetzung ist, dass das div gut in kleinere Bildschirme skaliert (reaktionsfähig), aber ich habe auch versucht, Prozentsätze als Punkte des Pentagons zu verwenden, aber das hat mich sicherlich nicht weitergebracht (auch auf dem Text verwendete ich Prozente als x und y, aber es scheitert auch in kleineren Bildschirmen) neu zu skalieren,

hier ist das, was ich bisher habe:

HTML

012.351.

<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

Am Ende habe ich ein div mit der Höhe und Breite, die das Polygon hätte es ein Quadrat gewesen wäre, und verwendet inline svg clipPaths mit relativen Einheiten für Firefox und ein ClipPfad auf der CSS für Webkit-Browser, könnte nicht definiert t machen es wirklich auf iexplorer arbeiten, hier ist mein Code

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%); 

}

012.351.

Da ich Inhalt innerhalb der div selbst hinzufügen musste, und auch eine Überlagerung auf den Hintergrund legte, erwies sich dies als die beste Vorgehensweise

Answer 2

1. Entfernen Sie die width und height Attribute aus dem <svg> Element.
2. Fügen Sie die SVG zu Ihrer Seite, entweder direkt in HTML, als <img> oder über CSS Hintergrundbild.
3. Richten Sie die CSS so ein, dass die SVG auf die Breite des Containers (Eltern) skaliert wird, was davon abhängt, wie Sie die SVG hinzugefügt haben. (F. I. background-size: 100% wenn es ein Hintergrundbild oder width: 100% wenn es ein Element ist)

Dies sollte den Trick.