Replizieren einen Clip Pfad mit Polygonen

So versuche ich die folgenden Screenshot zu replizieren:Replizieren einen Clip Pfad mit Polygonen

, die leicht genug, um mit reinem CSS ist. Dauerte 3 Sekunden.

Aber ich muss IE9 unterstützen, die clip-path nicht unterstützt. Die einzige Alternative, die ich finden kann, um ein Div zu haben, das richtig skaliert, ist die Verwendung von SVGs.

Die Seite wird nie scrollen müssen, daher ist mein Plan, ein absolut positioniertes div zu haben, das den SVG und den Layering-Inhalt darüber enthält. Hier ist , wo das Problem liegt, mein derzeitiger Code erzeugt dies:

Hilfe?

Hier ist der zugrunde liegende Code:

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Error 404</title> 
 

 
    <style> 
 
\t 
 
     body { 
 
      background: #F1F1F1; 
 
      background-image: url('https://wallpaperclicker.com/storage/wallpaper/High-Definition-Ultra-HD-Wallpaper-96262544.jpg'); 
 
      background-size: cover; 
 
     } 
 

 
     body, html { 
 
      height: 100%; 
 
\t \t \t padding: 0; 
 
\t \t \t margin: 0; 
 
     } 
 

 
     .main-bg { 
 
      height: 100%; 
 
      width: 100%; 
 
     } 
 

 
     .main-container { 
 
      height: 100%; 
 
      width: 80%; 
 
     } 
 
    </style> 
 
</head> 
 
<body> 
 
<div class="main-container"> 
 
    <svg class='main-bg' viewBox="0 0 100 100" > 
 
     <polygon points="0,0 0,100 55,100 100,0" style="fill: rgba(41, 49, 56, 0.95);" /> 
 
    </svg> 
 
</div> 
 
</body> 
 
</html>

Quelle

2017-10-31 Bitz

Das Seitenverhältnis des viewBox nicht den Container passen, so dass Sie Lücken bekommen. Sie können preserveAspectRatio = "none" verwenden, um zuzulassen, dass das Seitenverhältnis mit der Containerform variiert.

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Error 404</title> 
 

 
    <style> 
 
\t 
 
     body { 
 
      background: #F1F1F1; 
 
      background-image: url('https://wallpaperclicker.com/storage/wallpaper/High-Definition-Ultra-HD-Wallpaper-96262544.jpg'); 
 
      background-size: cover; 
 
     } 
 

 
     body, html { 
 
      height: 100%; 
 
\t \t \t padding: 0; 
 
\t \t \t margin: 0; 
 
     } 
 

 
     .main-bg { 
 
      height: 100%; 
 
      width: 100%; 
 
     } 
 

 
     .main-container { 
 
      height: 100%; 
 
      width: 80%; 
 
     } 
 
    </style> 
 
</head> 
 
<body> 
 
<div class="main-container"> 
 
    <svg class='main-bg' viewBox="0 0 100 100" preserveAspectRatio="none"> 
 
     <polygon points="0,0 0,100 55,100 100,0" style="fill: rgba(41, 49, 56, 0.95);" /> 
 
    </svg> 
 
</div> 
 
</body> 
 
</html>

Quelle

2017-10-31 01:01:18

Vielen Dank! Das hat funktioniert. Mir war das Seitenverhältnis nicht bekannt, das Polygone und das Tag betrifft, um dieses Verhalten zu deaktivieren. – Bitz

Replizieren einen Clip Pfad mit Polygonen

Antwort

Verwandte Themen