如何利用HTML实现折角书签效果_通过CSS linear-gradient切角技巧-html教程-PHP中文网

用 linear-gradient 做折角比 clip-path 更稳定，尤其兼容 iOS Safari 和旧安卓 WebView；单层渐变需注意 background 顺序、no-repeat、固定 background-size；复杂折角推荐 ::after 伪元素双渐变叠加，并用 CSS 变量控制 hover 动画。

如何利用html实现折角书签效果_通过css linear-gradient切角技巧

直接用 linear-gradient 做折角比用 clip-path 更稳——尤其在 iOS Safari 和旧版安卓 WebView 里，clip-path: polygon() 容易错位或不支持百分比坐标，而 linear-gradient 从 IE10 起就跑得稳，渲染也一致。

右上角单层渐变切角：最简实现但容易被盖住

只用一层渐变就能“切”出三角形缺口，但必须注意背景层顺序和尺寸控制，否则根本看不到效果。

background 声明里，折角渐变必须写在主背景色前面，比如：background: linear-gradient(to bottom left, transparent 0, transparent 14px, #fff 15px), #fff；写反了就会被底色盖掉
必须加 no-repeat，否则小三角会平铺成锯齿带
background-size 要设成固定值（如 24px 24px），不能用百分比，否则在不同宽高比容器里会变形
如果容器本身有 border-radius，折角区域会跟圆角打架，建议把折角抽到 ::after 伪元素里单独控制

::after 伪元素双渐变叠加强化立体感

单层渐变只能模拟“缺一块”，真实折角需要明暗交界——浅色底 + 深色翻起面 + 微阴影。这时用 ::after 是唯一靠谱方案。

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

伪元素要设 content: ""、position: absolute、top: 0、right: 0，再用 width/height 控制大小（如 24px）
两层渐变分别模拟翻起面和阴影：linear-gradient(-135deg, #f8f8f8 0, #f8f8f8 8px, transparent 9px)（翻起） + linear-gradient(135deg, rgba(0,0,0,0.1) 0, rgba(0,0,0,0.1) 6px, transparent 7px)（阴影）
颜色统一用 rgba()，后期调透明度不用动结构
别乱加 z-index：伪元素默认就在内容上方，但如果父容器有 overflow: hidden 或 transform，可能被裁掉或层叠错乱

hover 动画不能直接 transition background-size

给多层渐变的 background-size 或 background-position 加 transition 基本无效——Chrome 会跳变，Firefox 根本不触发。得换思路。

推荐用 CSS 自定义变量控制尺寸，比如定义 --fold-size: 16px，然后在 ::after 里写 background-size: var(--fold-size) var(--fold-size)
hover 时只改变量值：:hover { --fold-size: 24px; }，再配 transition: --fold-size 0.2s
如果要用 transform 动画，得设 transform-origin: top right，否则缩放中心偏移，角会“飘”
避免用 rotate() 配 top/right 补偿——计算麻烦且在高DPI屏上易露白缝