はポリゴン

にクリップパスを複製だから私は、次のスクリーンショットを複製しようとしています。 3秒かかりました。はポリゴン

しかし私はIE9をサポートする必要があります。これはclip-pathをサポートしていません。 SVGを使用してdivを適切にスケールすることができます。

ページをスクロールする必要がないので、私の計画では、絶対配置されたdivにsvgとその上にコンテンツを重ねることが含まれています。

ヘルプ：ここは問題は現在、私のコードは、この生成し、どこにあるのですか？あなたはギャップを得るように、あなたのビューボックスのアスペクト比がコンテナに一致しない

<!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>

出典

2017-10-31 Bitz

：ここ

は、基礎となるコードです。 preserveAspectRatio = "none"を使用すると、コンテナの形状に応じてアスペクト比を変えることができます。

<!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>

出典

2017-10-31 01:01:18

ありがとうございます！それはうまくいった。私はポリゴンに影響するアスペクト比とその動作を無効にするタグを認識していませんでした。 – Bitz

答えて

関連する問題