Page 141 - css揭秘

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

图 4-37 展示了简单的渲染结果，这正是我们一直苦苦追寻的效果。唉，
真不容易啊！接下来，由于这个折页三角形现在是由伪元素来实现的，我们
图 4-36 还可以让它更加真实一些，比如增加圆角、（真正的）渐变以及投影！最终
算出这个折页三角形所需的移动 的代码如下所示：
距离，其实并没有乍看起来那么
困难
.note {
position: relative;
background: #58a; /* 回退样式 */
! background:
要确保把 translateY() 变 linear-gradient(-150deg,
形放在旋转变形之前，否则这个 transparent 1.5em, #58a 0);
三角形会在 30°方向上进行移动。 border-radius: .5em;
因为每个变形步骤都会改变元素 }
.note::before {
的整个坐标系统，而不仅是改变 content: '';
元素自身！ position: absolute;
top: 0; right: 0;
background: linear-gradient(to left bottom,
transparent 50%, rgba(0,0,0,.2) 0, rgba(0,0,0,.4))
100% 0 no-repeat;
width: 1.73em;
height: 3em;
transform: translateY(-1.3em) rotate(-30deg);
transform-origin: bottom right;
border-bottom-left-radius: inherit;
box-shadow: -.2em .2em .3em -.1em rgba(0,0,0,.15);
图 4-37 }
这两个三角形终于对齐了，和谐
动人 你可以在图 4-38 中欣赏到我们的辛勤耕耘所收获的硕果。

试一试 play.csssecrets.io/folded-corner-realistic

最终的效果看起来很不错，但代码是不是够 DRY 呢？让我们来看一看，
如果对样式做些改动或对效果做些微调，会是什么情况。
„ 如果要改变元素的宽高或其他尺寸（比如内边距等），只需要修改
一处。
„ 如果要改变元素的背景色，则只需要修改两处（如果不写回退样式
图 4-38 则只有一处）。
在添加了更多的样式之后，折角 „ 如果要修改折页的大小，需要修改四处，并做一些复杂的计算。
效果非常逼真
„ 如果要修改折页的角度，则需要修改五处，并做一些更加复杂的
计算。

最后两条实在是很不理想。差不多可以请出预处理器的 mixin 了：

110 第 4 章 视觉效果

඀ࠡ JOEC