通过 border 技巧生成 CSS 三角形,调节参数导出可用代码
这是浏览器端的 CSS 三角形生成工具。无需使用图片资源,直接生成适配网页的三角形 CSS 代码,帮你省去手动调试参数的麻烦。
它基于 CSS border 拼接原理实现:利用相邻边框直角拼接的特性,隐藏另外三个方向的边框,得到指定大小和颜色的三角形。
不支持。CSS border 拼接法无法实现圆角三角形,需要圆角可使用 SVG 方案实现。
支持上下左右四个基础方向,以及八个斜向方向,共 12 种方向可选。
兼容所有支持 CSS 的浏览器,包括 IE8 及更早版本都能正常显示。
不能直接生成空心三角形,你可以用两个同方向不同大小的三角形叠加模拟空心效果。