使用多边形复制剪辑路径

Question

所以我正在尝试复制以下屏幕截图：

纯 css 这很容易。花了 3 秒。

但是我需要支持IE9，IE9不支持clip-path。我能找到的唯一可以正确缩放 div 的方法是使用 SVG。

页面永远不需要滚动，所以我的计划是有一个绝对定位的 div 包含 svg 和分层内容。这是问题所在，目前我的代码产生了这个：

帮忙？

下面是底层代码：

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

    <style>
 
        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%;
   padding: 0;
   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>

Answer 1

您的 viewBox 的纵横比与容器不匹配，因此会出现间隙。您可以使用 preserveAspectRatio="none" 来允许宽高比随容器形状而变化。

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

    <style>
 
        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%;
   padding: 0;
   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>

使用多边形复制剪辑路径

Replicating a clip path with polygons

html

svg

polygon