这个角度在任何宽度上都可以相同吗？

Question

无论视口宽度如何，我都试图使带有倾斜底边的 div 具有相同的角度。

使用clip-path产生了最平滑的边缘，但我不知道是否有一个calc()我可以用来保持角度。

倾斜的伪元素可以工作，但抗锯齿效果很差，所以我想避免这种情况。

所以我的问题是：使用clip-path: polygon(0 0, 100% 0, 100% calc(/* what goes here */, 0 100%)什么是calc()这样的角度？在 A 边的所有宽度上为 86%？

Answer 1

不幸的是，不可能单独使用 CSS 进行计算，因为您需要三角学方法 ( sin(), cos(), tan())。

更新：

CSS 获得对三角函数的支持

如果您需要进行计算并将其应用于静态、无响应的多边形，那么 Sass 是您的朋友。否则，JavaScript Math 函数是唯一的答案。

编辑：计算

假设您有以下形状，其中 ABCD 是您想要的形状（包括 E 以帮助计算）：

A                                        B
o----------------------------------------o
|                                        |
|                                        |
|                                        |
|                                        |
|                                        o C
|                                        |
|                                        |
o----------------------------------------o
D                                          E

这里的技巧是找到CE总高度的长度并将其减去。

如果我们从直角三角形开始CDE。角度< DCE实际上等于角度< ADB（86deg你想要的）。我们也知道的长度DE- 100%，但恐怕只是把它看作一个无单位的值了。这足以让我们计算 的长度CE。

DE = 100
< DCE = 86deg

使用以下三角函数计算：

tan(@) = <opposite-length> / <adjacent-length>
tan(@) = DE / CE
// Let's put in what we know
tan(86) = 100 / CE
CE = 100 / tan(86)

使用这个，并假设的高度BE是100（或100%），然后我们可以找到BC具有以下内容的长度：

BC = BE - CE
// BE == AD (which you will be able to use programatically)
BC = AD - CE
BC = 100 - CE
BC = 100 - [100 / tan(86)] = 93.0073%
// so your calculation would be:
BC = AD - [AD / tan(86)] * 1%

因此，坐标C应为100%, 93.0073%

参考