什么是 CSS 三角形生成器？
CSS 三角形生成器是一个可视化工具，可帮助您快速准确地创建 CSS 三角形。无需手动计算边框值或 clip-path 坐标，只需选择方向、调整大小和颜色，然后复制生成的代码。
两种 CSS 方法
该工具支持两种流行的 CSS 三角形创建方法：
边框技巧
使用透明边框的经典方法。适用于所有浏览器，包括较旧的浏览器。该元素的宽度和高度为零，彩色边框创建三角形形状。
- 最大浏览器支持
- IE11 兼容
- 零宽度/高度元素
Clip-path
使用 clip-path: polygon() 的现代方法。生成更简洁、更易读的代码，具有明确的宽度和高度值。三角形通过将彩色矩形裁剪成三角形形状来创建。
- 代码结构更简洁
- 仅限现代浏览器
- 明确的尺寸
何时使用 CSS 三角形
提示框箭头
下拉菜单插入符
装饰元素
面包屑分隔符
角落丝带
使用方法
选择方向
点击网格中的 8 个方向按钮之一。四个基本方向（上、右、下、左）创建标准三角形，而四个对角线方向（左上、右上、左下、右下）创建直角三角形。
设置大小
使用宽度和高度滑块或输入精确值（1–500px）。点击锁定按钮以保持 1:1 宽高比 — 更改一个尺寸将自动更新另一个。
选择颜色
使用颜色选择器选择任何自定义颜色，或点击预设色板之一快速选择。预览和代码输出会立即更新。
选择方法
在边框（经典边框技巧）或Clip-path（现代多边形方法）之间选择。两者都产生相同的视觉效果，但 CSS 代码不同。
复制代码
CSS 代码面板显示活动方法的生成代码。使用选项卡切换器比较两种方法。点击复制 CSS将代码复制到剪贴板。
功能
8 方向支持
创建指向任何 8 个方向的三角形。四个基本方向生成等腰三角形，而对角线方向创建直角三角形，非常适合角落装饰。
精确的大小控制
使用滑块或直接数字输入，独立调整宽度和高度，范围从 1 到 500 像素。
- 滑块或直接输入
- 锁定宽高比选项
- 1–500px 范围
颜色自定义
使用原生颜色选择器选择任何颜色，或从 8 个预设色板中快速选择，涵盖最常用的颜色。
- 自定义颜色选择器
- 8 个预设色板
- 即时预览更新
双 CSS 方法
使用两种不同的 CSS 技术生成代码：
- 边框技巧 — 最大浏览器支持
- Clip-path 多边形 — 更简洁的现代代码
实时预览
在棋盘背景图案上实时查看您的三角形渲染。大型三角形会自动缩放以适应预览区域，同时保持准确的比例。
内置预设
12 个预设涵盖常见用例，带有显示精确形状的迷你预览。
- 标准箭头（4 个方向）
- 提示框和下拉菜单插入符
- 角落三角形和旗帜
常见问题
我应该使用哪种方法 — 边框技巧还是 clip-path？
如果需要支持较旧的浏览器（IE11 及以下），请使用边框技巧。对于针对现代浏览器的项目，使用clip-path 以获得更简洁、更易读的 CSS。两者都产生视觉上相同的结果。
CSS 边框技巧如何创建三角形？
当元素的宽度和高度为零时，其边框在对角线处相交。通过使某些边框透明并使一个边框着色，只有着色边框的三角形区域可见，从而创建三角形形状。
关键概念：三角形不是绘制的 — 它是通过隐藏边框交点的部分而显示的。
我可以创建等边三角形吗？
可以。对于看起来像等边三角形的向上或向下指向的三角形，将宽度设置为高度的约 1.15 倍（例如 115×100）。对于数学上精确的等边三角形，宽度应等于高度 × 2 / √3。
- 视觉近似：宽度 = 高度 × 1.15
- 数学精确：宽度 = 高度 × 2 / √3（≈ 1.1547）
对角线方向三角形用于什么？
对角线三角形（左上、右上、左下、右下）创建直角角落形状。这些通常用于：
- 角落丝带和徽章
- 装饰性页面角落
- 卡片上的折角效果
- 几何设计装饰
为什么我的三角形在小尺寸时看起来模糊？
非常小的三角形（小于 10px）可能因子像素渲染而显得模糊。这是浏览器渲染的限制。如果可能，请使用稍大的尺寸或确保尺寸导致整像素边框值。
我可以为 CSS 三角形设置动画吗？
边框技巧三角形可以为边框宽度和边框颜色设置动画。Clip-path 三角形提供更多灵活性 — 您可以为多边形点、背景颜色、宽度和高度设置动画，以实现平滑的形状过渡。
有限动画
- 边框宽度
- 边框颜色
完整动画
- 多边形点
- 背景颜色
- 宽度和高度
- 形状变形
还没有评论，快来发表第一条！