Question

所以我试图复制以下截图：

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

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>

使用多边形复制剪辑路径

1 个答案: