CSS 箭头生成器

下一个

在浏览器中创建简单的 CSS 箭头。选择右、左、上或下,以及颜色、正方形尺寸和边框粗细,然后复制生成的 .arrow 规则。

创建 CSS 箭头

  1. 1

    选择方向

    选择右、左、上或下。

  2. 2

    设置外观

    设置颜色、尺寸和以像素为单位的粗细。

  3. 3

    复制 CSS

    检查预览后复制规则。

生成器会创建一个正方形 .arrow 元素,使用 display: inline-block、相同的宽高、右边框和下边框,并为四个方向应用旋转。

它不生成边框三角形、clip-path、SVG、渐变、斜向箭头或工具提示尾巴,也不提供 HTML、布局验证或兼容性建议。请在自己的页面中测试复制的规则。

相关工具