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

Question

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

使用clip-path产生了最光滑的边缘，但我无法弄清楚是否有一个calc()我可以用来保持角度。

偏斜的伪元素有效，但抗锯齿效果差，所以我想避免这种情况。

所以我的问题是：使用clip-path: polygon(0 0, 100% 0, 100% calc(/* what goes here */, 0 100%) calc()中的东西，使得在A的所有宽度处角度θ为86％？

Answer 1

不幸的是，由于你需要三角学方法（sin()，cos()，tan()），所以不可能单独使用CSS进行计算。

更新：

CSS to get support for trigonometry functions

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

编辑：计算

假设您具有以下形状，其中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%

REF