這個角度在任何寬度都可以相同嗎？

我正在嘗試使角度不變的底部邊緣具有相同的角度，無論視口寬度。這個角度在任何寬度都可以相同嗎？

使用clip-path產生了最平滑的邊緣，但我不知道是否有calc()我可以用來保持角度。

偏斜的僞元素可以工作，但抗鋸齒效果差，所以我想避免這種情況。

所以我的問題是：使用clip-path: polygon(0 0, 100% 0, 100% calc(/* what goes here */, 0 100%)什麼是calc()，使角度θ爲86％，在所有寬度的邊A？

來源

2017-08-17 Derek Johnson

要計算它是什麼並不清楚。你可以畫一個素描嗎？ – MBo

不幸的是，它不會是可能與CSS單獨計算，你將需要三角學方法（sin()，cos()，tan()）。

如果您需要進行計算並將其應用於靜態無響應多邊形，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%

裁判

Trigonometry helper

來源

2017-08-17 21:15:01 carmat

很好的答案，謝謝Colm！由於它的響應速度，它必須是JS。 –

很好的答案。榮譽。 –

這個角度在任何寬度都可以相同嗎？

回答

相關問題