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

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()）。

UPDATE:

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

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

Can this angle be the same at any width?

css

geometry

clip-path