CSS三角形生成器
这款 CSS 三角形生成器以可视化方式为你生成纯 CSS 三角形，从此再也不用手动计算边框宽度或 clip-path 坐标。选好方向，设定尺寸和颜色，就能复制可直接粘贴的 CSS，用于提示框箭头、下拉小箭头、面包屑导航的尖角或转角丝带。
它同时支持两种经典技巧。border 边框法把元素的宽高设为零，再用透明边框塑造出一个有色三角形，在所有浏览器中都能工作。clip-path 裁剪法对有色方块使用 clip-path: polygon()，在现代浏览器中生成更简洁易读的代码。两者得到的形状完全一致，复制前你可以并排对比这两种方法。
使用方法
选择方向
在方向网格中点击 8 个按钮之一。四个正向（上、右、下、左）生成标准三角形，四个对角方向（左上、右上、左下、右下）则生成直角转角三角形。
设定尺寸
拖动宽度和高度滑块，或直接输入 1 到 500 像素之间的精确数值。开启 锁定宽高比 可让两个尺寸保持一致——改动其中一个，另一个会同步更新。
选择颜色
用颜色选择器挑选任意自定义颜色，或点击预设色块快速取色。预览和生成的代码会即时更新。
选择方法并复制
在 border 边框法 和 clip-path 裁剪法 之间切换方法，用代码标签页对比两者，再点击 复制 CSS 把代码直接发送到剪贴板。随时点击 重置 即可回到默认值。
功能特点
8 个方向
让三角形指向上、右、下或左生成标准形状，或使用四个对角方向生成直角转角三角形。
精确尺寸控制
用滑块或数字输入框把宽度和高度从 1 到 500px 独立设定，并可锁定宽高比实现等比缩放。
颜色自定义
用原生颜色选择器挑选任意颜色，或从 8 种预设色块中选择：靛蓝、深色、白、红、绿、蓝、琥珀和紫罗兰。
border 与 clip-path 两种方法
用经典的透明边框技巧生成兼容性最佳的代码，或用 clip-path 多边形生成更简洁的现代 CSS。
实时预览
在棋盘格背景上实时呈现你的三角形，并有信息栏显示当前的尺寸和方向。
自动缩放预览
大尺寸三角形会自动缩小以适应预览区域，同时保持准确的比例。
12 个内置预设
从常用形状起步——四个方向的箭头、细箭头和宽箭头、气泡箭头、小箭头、转角三角形和旗帜。
双代码标签页
用标签切换器查看并对比两种方法生成的 CSS；改动任意设置时代码都会即时更新。
一键复制
点击一下即可把当前方法的 CSS 复制到剪贴板，可直接粘贴进你的样式表。
重置为默认值
随时用重置按钮把方向、尺寸、颜色和方法恢复到初始值。
常见问题
CSS 怎么画三角形？
常见的两种方法是 border 边框法和 clip-path 裁剪法。用这款生成器，你只需选好方向、尺寸和颜色，再复制 CSS——无需手动计算。需要最广浏览器支持就选 border 边框法，想要更简洁的现代代码就选 clip-path 裁剪法。
border 边框法是如何画出三角形的？
当一个元素的宽度和高度都为零时，它的四条边框会沿对角线交汇。把其中几条边框设为透明、只保留一条边框有颜色，就只有那条有色边框的三角形区域可见，从而形成了三角形。
该用 border 边框法还是 clip-path 裁剪法？
需要兼容非常老的浏览器时用 border 边框法，因为它在任何地方都能工作。现代项目中想要更短、更易读、宽高明确的 CSS 时用 clip-path 裁剪法。两者生成的三角形视觉上完全一致，你可以切换方法对比。
如何改变三角形的方向？
点击 8 个方向按钮中的任意一个。正向（上、右、下、左）生成指向该方向的标准三角形，对角方向（左上、右上、左下、右下）则生成直角转角三角形，适合丝带和折角效果。
能否创建等边三角形？
可以。要让向上或向下的三角形看起来像等边三角形，把宽度设为高度的约 1.15×（例如 115×100）。要得到数学上精确的等边三角形，宽度应等于高度 × 2 / √3。
为什么我的三角形在小尺寸下看起来模糊？
非常小的三角形（约 10px 以下）可能因为亚像素渲染而显得模糊，这是浏览器的限制，而非代码本身的问题。改用稍大一点的尺寸，或选择能得到整数像素边框值的尺寸，就能让边缘保持清晰。
可以给 CSS 三角形做动画吗？
可以。border 边框法的三角形可以对 border-width 和 border-color 做动画。clip-path 裁剪法的三角形更灵活——你可以对多边形顶点、背景颜色、宽度和高度做动画，实现平滑的形状过渡。
还没有评论，快来发表第一条！