Page 140 - css揭秘

background:
linear-gradient(-150deg,
transparent 1.5em, #58a 0);
}
.note::before {
content: '';
position: absolute;
top: 0; right: 0;
background: linear-gradient(to left bottom,
transparent 50%, rgba(0,0,0,.4) 0)
100% 0 no-repeat;
width: 3em;
height: 1.73em;
}

到了这里，我们只不过是把图 4-32 中的效果用伪元素又实现了一遍。
下一步将把折页三角形的 width 和 height 对调，以此改变它的方向，这样
就可以得到跟折页缺口对称的三角形，而不是一个可以补足折页缺口的三角
形。然后，我们再以逆时针 30°（(90° – 30° ) –30°）来旋转这个折页三角形，
这样可以让它的斜边与折线平行：

.note::before {
content: '';
position: absolute;
top: 0; right: 0;
background: linear-gradient(to left bottom,
transparent 50%, rgba(0,0,0,.4) 0)
100% 0 no-repeat;
width: 1.73em;
height: 3em;
transform: rotate(-30deg);
}

在图 4-34 中，你可以看到这页纸在经过上述调整之后会是什么样子。
如你所见，我们基本上已经接近目标了，但还需要把这个折页三角形再挪动
一下，以便让这两个三角形（深色的三角形折页和折角的三角形缺口）的斜 图 4-34
边重合。从现在的情况来看，它在水平和垂直方向上都需进行移动，因此 我们快要接近目标了，但还需要
要算出这两个偏移量似乎困难重重。我们可以让事情变得更简单一些：把 移动这个折页三角形
transform-origin 设置为 bottom right，让三角形的右下角成为旋转的中
心，这样就可以让它的右下角保持固定。

.note::before {
/* [其余样式] */
transform: rotate(-30deg);
transform-origin: bottom right;
}

如图 4-35 所示，现在只需在垂直方向上向上移动这个折页三角形就 图 4-35
可以了。为了算出实际要移动的距离，我们又要动用几何学了。如你在图 添加 transform-origin: bott-
om right; 会让事情变得简单一
y
3
4-36 中所见，所需的垂直偏移量是 x −= − 3 1.267 949 192≈ ，我们这里
些：只需要在垂直方向上移动这
取整为 1.3em： 个折页三角形

19 折角效果 109

඀ࠡ JOEC