css - 设置 CSS 多边形 Angular

Question

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

正如您在这个 fiddle 中看到的:http://jsfiddle.net/1e7y7mxg/两个容器共享以下裁剪路径，但由于它们的高度不同，线条的实际 Angular 也大不相同。

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

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

谢谢!

Answer 1

如果我没理解错的话，您希望不同尺寸的形状具有相同的视角？

然后你可以用像素值设置clip-path值，并使用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>