用 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 单位又可能破坏比例。
广研企业网站管理系统中英文双语版
下载
v1.8新增功能简介： 一、后台新增生成网站地图和生成Sitemap.xml的功能。 二、新增下载中心功能，可在后台上传doc,xls,ppt,rar,pdf文件。 三、新增产品缩略图自动缩放功能，图片按比例缩放，解决了图片变形问题。 四、新闻、产品详细页新增了上一个、下一个的功能，改善用户体验。 五、在线客服新增了阿里巴巴贸易通在线客服。 六、可在后台设置分享代码，如百度分享和AddThis等。
- 优先用
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 顺序，而不是你想的“上三角在上、下三角在下”。 
