html如何书页样式,CSS案例：实现书页任意折角效果

书页任意角度折角效果示意图

欢迎来到二狗哥的博客，HTML、CSS、JavaScript等前端代码研究，你我共勉！

代码编程要求：

1、折线与上边缘构成角度为30°；2、背景颜色色标#6d98bd，折角部分色标#577b98；3、为增加逼真效果，需要为折角添加阴影；4、折角不能遮盖内容文字部分；

书页任意角度折角效果分解为两个步骤：(1)绘制满足要求的特定三角形；(2)将三角形位置设置为指定坐标地点。

构建数学模型进行分析：

矩形ABCD代表主体元素(.note),三角形EFB1代表折角元素，并且三角形EFB1与三角形EBF关于EF轴对称。

实现思路：主体采用相对定位，翻折部分用伪元素通过绝对定位来实现。主体元素(.note)的背景翻折部分(虚线三角形)，通过线性渐变颜色显示剪去翻折部分。

上面是数学模型的局部放大图，采用背景线性渐变来剪去目标三角形，剪去部分为透明色(transparent)。重点是确定达到指定线性渐