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

Trigonometry helper

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

1 个答案: