border是唯一靠谱的通用css画三角形方案，原理是设宽高为0后利用单向实色边框与其余透明边框交汇形成斜角三角形。
用 border 实现三角形最简单
纯 CSS 画三角形，border 是唯一靠谱的通用方案。原理是利用边框交汇时的斜角渲染——把宽高设为 0，只留一个方向的 border，其他三边设为透明或同色，就能挤出三角形。
- 必须同时设置
width: 0和height: 0，否则边框会“撑开”成梯形 - 四个
border方向（top/right/bottom/left）决定朝向，比如border-bottom: 20px solid red+ 其他三边transparent→ 向下的红三角 - 边框宽度直接决定三角形大小，但不是等边：底边长度 ≈ 边框宽度 × 2，高 ≈ 边框宽度
- 别用
outline或box-shadow替代，它们不参与盒模型计算，无法形成尖角
箭头类三角形要小心父容器溢出
用 border 生成的三角形本质是块级元素的一部分，如果父容器设置了 overflow: hidden，三角形可能被裁掉——尤其当它靠边定位时。
- 常见错误：给
div设position: relative，再用after伪元素画三角形，但父div没预留空间，三角形一半被切掉 - 解决方法：父容器加
padding（比如朝下箭头就加padding-bottom），或改用position: absolute并确保父容器有position: relative - 移动端要注意：高 DPI 屏下，1px 边框可能渲染模糊，建议用
1.5px或2px避免发虚
需要抗锯齿或旋转时，改用 clip-path
border 三角形在旋转或缩放时边缘容易出现明显锯齿，特别是小尺寸或斜向角度。这时 clip-path 更可控，但兼容性略低（IE 不支持）。
JTBC网站内容管理系统5.0.3.1
下载
JTBC CMS(5.0) 是一款基于PHP和MySQL的内容管理系统原生全栈开发框架，开源协议为AGPLv3，没有任何附加条款。系统可以通过命令行一键安装，源码方面不基于任何第三方框架，不使用任何脚手架，仅依赖一些常见的第三方类库如图表组件等，您只需要了解最基本的前端知识就能很敏捷的进行二次开发，同时我们对于常见的前端功能做了Web Component方式的封装，即便是您仅了解HTML/CSS也
- 基础写法：
clip-path: polygon(0% 0%, 100% 0%, 50% 100%)→ 等腰三角形，顶点在底部中央 - 坐标系是相对于元素自身宽高的百分比，不是像素，所以得确保容器有明确尺寸（比如
width/height或aspect-ratio） - 想旋转又保持清晰？先用
clip-path画好，再对整个元素用transform: rotate()，比旋转border三角形效果干净得多 - 注意 Safari 旧版本要求
-webkit-clip-path前缀，但 iOS 15.4+ 已可省略
SVG 三角形适合图标或响应式场景
如果三角形要作为图标、需要精确控制顶点坐标、或必须随容器等比缩放，直接上 <svg></svg> 最省心。
立即学习“前端免费学习笔记（深入）”；
- 最小可用代码：
<svg viewBox="0 0 20 20"><polygon points="10,0 0,20 20,20" fill="red"/></svg>
-
viewBox决定缩放行为，points顺序影响渲染方向（顺时针/逆时针决定是否填充） - 和 HTML 元素混排时，
svg默认是行内元素，高度可能不一致，加vertical-align: middle或设display: block更稳 - 别用
img引用 SVG 文件来画简单三角形——多一次 HTTP 请求，还失去内联样式控制能力
