CSS 三角形生成器

使用经典的边框技巧生成 CSS 三角形。设置方向、大小和颜色，然后复制片段。

CSS Triangle Generator

Live

Direction

Size60px

Color

CSS output

width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-bottom: 60px solid #e11d48;

Key capabilities

使用边框技巧生成 CSS 三角形 - 方向、大小和颜色。
在您的浏览器中运行
免费使用

使用方法

选择三角形方向。
设置大小和填充颜色。
复制 CSS。

How this tool works

选择三角形方向。
设置大小和填充颜色。
复制 CSS。

Recommended settings

首先使用默认选项，然后根据需要进行调整

Supported formats

Text / on-page input

File size and limits

在旧手机上，非常复杂的多层预览可能会感觉较慢。

Privacy

颜色和 CSS 生成器完全在您的浏览器中运行。预览和转换永远不会上传您的样式。

Common use cases

每当需要时使用 CSS 三角形生成器：使用边框技巧（方向、大小和颜色）生成 CSS 三角形。

Troubleshooting

粘贴后预览看起来有所不同

检查页面上是否存在竞争 CSS（重置、继承颜色）。首先将生成的规则复制到独立的样式表中。

常见问题

这会上传我的 CSS 吗？

不需要。生成器和转换器在您的浏览器中运行并提供实时预览。

我需要一个帐户吗？

不。打开工具，调整控件，然后复制 CSS。