Page 142 - css揭秘

@mixin folded-corner($background, $size,
$angle: 30deg) {
position: relative;
background: $background; /* 回退样式 */
background:
linear-gradient($angle - 180deg,
transparent $size, $background 0);
border-radius: .5em;

$x: $size / sin($angle);
$y: $size / cos($angle);

&::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: $y; height: $x;
transform: translateY($y - $x)
rotate(2*$angle - 90deg);
transform-origin: bottom right;
border-bottom-left-radius: inherit;
box-shadow: -.2em .2em .3em -.1em rgba(0,0,0,.2);
}
}

/* 当调用时... */
.note {
@include folded-corner(#58a, 2em, 40deg);
}

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

!
„ CSS 背景与边框 编写本书时，SCSS 还没有
http://w3.org/TR/css-backgrounds 相关规范 原生支持三角函数。如果想正常使
用三角函数，需要用到 Compass
„ CSS 图像 框架（http://compass-style.org）或
http://w3.org/TR/css-images 其他库。借助泰勒展开式，还可
以自己写一套三角函数的实现。
„ CSS 变形 另外，Stylus 和 LESS 原生内置
http://w3.org/TR/css-transforms 了三角函数。

19 折角效果 111

඀ࠡ JOEC