Question

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

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

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

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

谢谢！

Answer 1

如果我理解得对，你想在不同大小的形状上看到相同的角度吗？

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

设置CSS多边形角度

1 个答案: