Page 139 - css揭秘
P. 139
3 1
数学书（或计算器）里已经知道 cos30°= 和 sin30°= 。把这些算式代
2 2
1.5 1.5
入我们的例子，就可以得出 sin30°= 和 cos30°= 。因此：
x y
1 = 1.5 ⇒ x =× x = 3
2 1.5 ⇒
2 x
×
3 = 1.5 ⇒ y = 2 1.5 ⇒ y = 31.732 050 808
≈
2 y 3
图 4-31
借助正弦函数和余弦函数，我们
可以通过直角三角形的锐角角度
和斜边长度计算出直角边的长度
到了这里，我们还可以运用勾股定理计算出 z：
2
2
2
2
z = x + y = 3 + 3 = 39+ = 12 = 23
现在可以改变三角形的大小，让它更符合整体效果：
background: #58a; /* 回退样式 */
background:
linear-gradient(to left bottom,
transparent 50%, rgba(0,0,0,.4) 0)
图 4-32 no-repeat 100% 0 / 3em 1.73em,
linear-gradient(-150deg,
尽管达到了想要的结果，但我们 transparent 1.5em, #58a 0);
可以看出，这和前面的例子相比
显得更不真实了 此时，我们的折角效果如图 4-32 所示。如你所见，这个三角形现在确
实已经跟切角对上号了，但这个结果看起来更不真实了！尽管我们可能无法
很快地找出具体原因，但我们以前曾见过无数的折角，因此一眼就可以发现
这跟我们印象中的折角相去甚远。如果你拿出一张真实的纸并折出类似的角
度，或许就能理解它为什么看起来很假了。我们完全不可能把一张纸折成
（甚至是哪怕是接近）图 4-32 的那种样子。
来看看现实世界中的折角（比如图 4-33 中的这个），我们会发现这个
折页三角形是需要微微旋转的，它的尺寸跟我们从元素角上“切”下来的
那个三角形应该是一致的。由于我们无法旋转背景，这里终于轮到伪元素
登场了：
图 4-33
折角效果在现实世界中的版本（我 .note {
的两个小表妹 Leonie 和 Phoebe position: relative;
Verou 送给我的漂亮信纸） background: #58a; /* 回退样式 */
108 第 4 章 视觉效果
ࠡ JOEC
