设置 CSS 多边形角度答案

【问题标题】：Set CSS Polygon angles设置 CSS 多边形角度
【发布时间】：2016-02-17 10:44:09
【问题描述】：

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

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

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

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

谢谢！

【问题讨论】：

您选择不使用受更好支持的transform:SkewY 有什么原因吗？
是的，不幸的是我有图像背景，我正在切割，而不仅仅是纯色。

标签： css responsive-design polygon css-shapes

【解决方案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>

【讨论】：

感谢您的高度。你知道有什么方法可以用宽度做类似的事情吗？如果您看到这个小提琴：jsfiddle.net/1e7y7mxg/1 剪辑路径仍然相同，但同样，由于宽度不同，角度的工作方式也不同。