设置 CSS 多边形角度

Question

我正在使用 CSS 剪辑路径向页面上某些容器的顶部添加有角度的边缘。我遇到的问题是这些容器具有不同数量的内容，并且多边形中的实际点显然基于每个元素的单独高度。这意味着容器的实际角度因元件而异。

正如您在这个小提琴中看到的：http://jsfiddle.net/1e7y7mxg/这两个容器共享以下剪辑路径，但由于它们的高度不同，线的实际角度有很大不同。

clip-path: polygon(0 0, 0 96%, 100% 100%, 100% 4%);

有没有一种方法可以根据彼此的角度设置点？或者，是否有另一种方法可以确保无论高度和宽度如何，角度都保持不变？

谢谢！

Answer 1

如果我理解正确的话，您想要不同尺寸的形状具有相同的视角吗？

然后您可以使用像素值设置剪辑路径值，并使用 calc 获得您想要的结果。

.container {
    -webkit-clip-path: polygon(0 0, 0 calc(100% - 5px), 100% 100%, 100% 5px);
    clip-path: polygon(0 0, 0 calc(100% - 5px), 100% 100%, 100% 5px);
    width: 300px;
    background: red;
    float: left;
    margin-right: 50px;
}

.two {
    background: blue;
}

<div class="container">dsadsads<br> dsadsa<br> ds<br> dsa<br> sadd </div>
<div class="container two">dsadsads<br> dsadsa<br> ds<br> dsa<br> sadd<br> dsadsads<br> dsadsa<br> ds<br> dsa<br> sadd dsadsads<br> dsadsa<br> ds<br> dsa<br> sadd  dsadsads<br> dsadsa<br> ds<br> dsa<br> sadd<br> dsadsads<br> dsadsa<br> ds<br> dsa<br> sadd dsadsads<br> dsadsa<br> ds<br> dsa<br> sadd  </div>