我在剪辑路径中使用内联 svg 来在我的容器上实现斜 Angular 效果。下面是我现在使用的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.clip-svg {
width: 0;
height: 0;
}
.clip-polygon {
-webkit-clip-path: url("#clip-svg-demo");
clip-path: url("#clip-svg-demo");
}
</style>
</head>
<body>
<div class="clip-wrap">
<img src="http://leisureleaguesfranchise.com/wp-content/uploads/2014/09/football2.jpg" alt="demo-clip-path" width="100px" height="100px" class="clip-polygon">
<img src="http://leisureleaguesfranchise.com/wp-content/uploads/2014/09/football2.jpg" alt="demo-clip-path" width="400px" height="400px" class="clip-polygon">
</div>
<svg display="none;">
<defs>
<clipPath id="clip-svg-demo" clipPathUnits="objectBoundingBox">
<polygon points="0,0 1,0 1,0.8 0.8,1 0,1" />
</clipPath>
</defs>
</svg>
</body>
</html>我面临的问题是用于裁剪的 svg 形状是响应式的。随着我的容器尺寸的增加，svg 形状的尺寸也会增加，因此右下角的斜切部分的长度也会增加。
我想要的是无论我的应用了 clip-path 属性的容器的尺寸如何，切割的长度都保持不变。
在我的代码中，我根据坐标系相对地指定了多边形的点。我知道我们可以绝对以像素为单位指定点，但这会使它成为固定大小的形状，可能无法完美地适合大于或小于 svg 形状尺寸的容器。
我需要找出是否可以同时在多边形点中同时具有相对和绝对尺寸，以便切割尺寸保持不变但整体多边形尺寸是响应的。
当前
需要
<强> 
编辑 我发了this之前有完全相同问题的问题，但那里的答案并不完全满足我的要求。我创建了这个新线程，因为我想在我现在正在尝试的一个特定解决方案(即剪辑路径)上获得更多帮助
最佳答案
如果您的页面背景是纯色(即不是图像或图案)，您可以采用这种非 SVG 方式:
.clip-wrap {
position: relative;
overflow: hidden;
}
.small,
.small .clip-polygon {
width: 100px;
height: 100px;
}
.large,
.large .clip-polygon {
width: 400px;
height: 400px;
}
.clip-wrap::after {
content: "";
display: block;
position: absolute;
background-color: white;
width: 30px;
height: 30px;
bottom: -15px;
right: -15px;
transform: rotateZ(45deg);
}<div class="clip-wrap small">
<img src="http://leisureleaguesfranchise.com/wp-content/uploads/2014/09/football2.jpg" alt="demo-clip-path" class="clip-polygon">
</div>
<div class="clip-wrap large">
<img src="http://leisureleaguesfranchise.com/wp-content/uploads/2014/09/football2.jpg" alt="demo-clip-path" class="clip-polygon">
</div>关于html - 在内联 svg 多边形中使用绝对和相对单位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32452294/