CSS 三角形生成器

使用 border 技巧生成上、下、左、右各朝向的纯 CSS 三角形，可自定义边长与颜色，实时预览效果并一键复制生成的样式代码，全部在浏览器本地完成。

三角形参数已就绪

朝向

边长

颜色

#3366ff

拖动滑块即可实时预览；三角形通过相邻边框的一半宽度与透明边框拼接而成。

实时预览与代码

生成的 CSS 将显示在这里。

使用规则

纯 CSS 三角形依赖 width: 0; height: 0; 与不同颜色的边框相接。
朝上的三角形：左、右边框透明，底边框着色。
朝右的三角形：上、下边框透明，左边框着色，以此类推。
透明边框必须与着色边框等宽，否则形状会发生偏移。
本工具完全在浏览器本地运行，输入数据不会上传到任何服务器。