Toolzy

CSS 三角形生成器

利用边框技巧生成 CSS 三角形。

width: 0;
height: 0;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 60px solid #6366f1;

创建任意方向、尺寸和颜色的纯 CSS 三角形，并复制 border 代码。

使用方法

  1. 选择方向和尺寸。
  2. 选取颜色。
  3. 复制 CSS。

常见问题

它是如何工作的？
它在一个零尺寸元素上使用透明边框，只给其中一侧上色。
可以用来做箭头吗？
可以，CSS 三角形常用于工具提示和下拉箭头。

相关工具