html如何设置上下两个三角形

用 border 实现上下三角形需设宽高为0，上三角用 border-bottom+透明边，下三角用 border-top+透明边；伪元素更优，注意定位、z-index 和响应式单位选择。

用 border 实现上下两个三角形

纯 CSS 用 border 画三角形是最轻量、兼容性最好的方式，不需要额外元素或 SVG。核心是利用边框交汇处的斜角特性，把其他三边设为透明，只留一边有颜色。

• 上三角：底边有颜色，左右和顶边设为透明，border-bottom 指定颜色和宽度
• 下三角：顶边有颜色，左右和底边透明，用 border-top
• 必须设置 width: 0; height: 0;，否则边框会撑出矩形块
• 三角大小由 border 宽度决定；等腰直角三角形需三边 border 宽度一致，且其中两边 transparent

上下三角同时存在时的布局陷阱

两个三角形如果直接相邻，容易因默认文档流或 margin 塌陷错位，尤其在 flex 或 grid 容器里表现不一。

• 避免用 margin 调间距，改用 transform: translateY() 微调位置更可控
• 父容器推荐加 display: inline-block 或 display: flex，防止块级三角“吞掉”换行符带来的空白
• 若三角需要居中，别对三角本身设 text-align: center（无效），而是对父容器设 text-align: center 或用 justify-content: center
• IE8 及以下不支持 transparent，得用 rgba(0,0,0,0) 或具体色值 + opacity 替代（但 opacity 会影响整个元素）

响应式下三角形变形怎么办

固定 border-width 在小屏下会显得过大，或在高 DPR 屏幕上锯齿明显；单纯用 vw 单位又可能破坏比例。

• 优先用 em 或 rem，让三角大小随字体缩放，例如 border-width: 0.5em 0.5em 0 0.5em;
• 若需精确控制宽高比，可用 clip-path: polygon(...) 替代 border 方案，但 safari 旧版本支持弱
• 不要给三角元素设 font-size: 0 来消除间隙——这会让 em-单位失效，且可能影响可访问性
• 用 box-sizing: border-box 对三角没意义（它没 content/border/padding 可 box），别加

用伪元素减少 dom 节点

上下三角通常只是装饰，没必要额外写两个 <span></span>。用 ::before 和 ::after 更干净，也方便统一控制状态（如 hover 变色）。

立即学习“前端免费学习笔记（深入）”；

• 父元素需设 position: relative，伪元素用 position: absolute 定位
• 上三角用 ::before，下三角用 ::after 是常见约定，便于维护
• 务必加 content: ""，否则伪元素不渲染
• 如果父元素有 overflow: hidden，三角可能被裁剪——检查父容器的 overflow 和 border-radius 影响

实际最常被忽略的是：两个三角共用同一个父容器时，z-index 默认都是 auto，一旦父容器没设 position，它们的层叠顺序就取决于 html 顺序，而不是你想的“上三角在上、下三角在下”。