使用多边形复制剪辑路径答案

【问题标题】：Replicating a clip path with polygons使用多边形复制剪辑路径
【发布时间】：2017-10-31 00:56:05
【问题描述】：

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

使用纯 css 很容易。花了 3 秒。

但是我需要支持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>

【问题讨论】：

标签： html svg polygon

【解决方案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>

【讨论】：

谢谢！那行得通。我不知道影响多边形的纵横比和禁用该行为的标签。