用border而非linear-gradient做书签折角，因border能零成本生成直角三角形：三边透明、一边有色，浏览器自动合成斜边，更轻量且无缩放错位风险；但仅适用于固定尺寸静态书签。

为什么用 border 而不是 linear-gradient 做书签折角

因为书签折角本质是直角三角形，而 border 技巧能零成本生成它——只需设三边透明、一边有色，浏览器自动合成斜边。比渐变更轻量、无缩放错位风险，也不依赖 background-size 或多层叠加顺序。但必须注意：border 法只适合固定尺寸的静态书签；如果容器宽高动态变化，或需要响应式角度（比如 30° 而非 45°），就得切到 clip-path 或伪元素 + transform。

::before 伪元素必须写 content: "" 才生效

这是最常被忽略的硬性规则。不写 content，哪怕加了 position: absolute 和 border，伪元素也不会渲染。另外几个关键点：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• position: relative 必须加在父容器上，否则 ::before 会相对于 body 定位，直接飘出视口
• 用 top/right 精确锚定到右上角，别用 bottom/left 反向推算
• z-index 要显式设为正数（如 1），否则可能被兄弟元素盖住
• 如果书签要悬停动效，transition 得加在伪元素上，而不是父容器

border 颜色与透明度怎么配才不露白边

露白边通常是因为有色边框和背景色没对齐，或者透明边框“透”出了下层内容。解决方案很直接：

• 把书签区域的背景色（比如 #ff6b35）同时用作 border-top-color 和 border-right-color，确保视觉无缝
• 不要用 rgba(255,107,53,0.8) 这类半透色做边框——它会和父背景混合出灰边；统一用纯色 + opacity 控制整体透明度（作用于整个伪元素）
• 如果父容器有 box-shadow，伪元素默认不继承，得单独加，且阴影偏移方向要匹配折角朝向（比如右上角折角，阴影用 -2px 2px）

如何让折角刚好卡住文字不遮挡

书签折角最容易盖住右上角的文字或图标。核心是控制伪元素的尺寸和定位偏移：

• 设 width: 0; height: 0; 是基础，靠 border 生成形状，而非用宽高撑开
• 用 border-top: 20px solid #ff6b35; + border-right: 20px solid transparent; 生成等腰直角三角形，斜边自然朝向左下
• 如果文字紧贴右上，加 right: 20px; 和 top: 20px; 把伪元素往内缩一点，留出安全边距
• 更稳妥的做法是给父容器加 padding-right 和 padding-top，把内容主动让开，而不是靠伪元素“挤”出来

实际项目里，真正难的不是画出那个三角形，而是它在不同缩放、DPR、字体加载完成前后是否始终对齐——这些细节没法靠一次写死的 px 值解决，得结合 em 或 clamp() 动态适配。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！