设置 CSS 多边形角度

Question

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

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

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

有没有办法根据彼此的角度来设置点？或者，有没有其他方法可以确保无论高度和宽度如何，角度都保持不变？

谢谢！

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>

设置 CSS 多边形角度

Set CSS Polygon angles

css

polygon

responsive-design

css-shapes