如何生成基于 CSS 边框的三角形

了解工具用途

这个工具用于生成基于边框样式的 CSS 三角形文本，适合在网页界面中快速准备不同朝向和尺寸的三角形样式。你可以设置方向和尺寸，也可以填写颜色参数；不过颜色参数不会改变生成结果中的边框颜色。

生成 CSS 三角形

先确定三角形的朝向。支持向上、向下、向左、向右，以及左上、右上、左下、右下八种方向。方向可以留空；留空时使用向上方向。
输入尺寸。尺寸也可以留空；留空时使用 20。工具会根据尺寸进行运算，包括除以二，并把运算结果写入像素单位的四个边框宽度。
如需填写颜色，可以输入颜色值，但不要把它当作控制三角形颜色的设置。生成的 CSS 使用透明边框颜色。
执行生成操作并查看 CSS 文本。生成结果通常包含零宽度、零高度、实线边框，以及由尺寸计算出的四个像素边框宽度。
检查方向输入是否属于支持的八种方向。如果输入了未识别的方向，工具仍会保留该方向文本来生成选择器，但边框宽度模式会回退为向上方向，因此应改用支持的方向后再生成。

检查生成结果

查看结果时，先确认选择器中的方向文本是否与你输入的内容一致，再检查四个边框宽度是否使用像素单位。对于受支持的方向，边框宽度模式对应相应朝向；对于未识别的方向，选择器文字可能保留原输入，但几何模式采用向上方向，不能据此认为它已经匹配了预期外观。还要注意，颜色输入不会带来不透明的三角形颜色，结果中的边框颜色仍为透明。尺寸并没有明确的范围或正数检查，因此应自行输入适合边框宽度运算的数值，并检查生成的像素值。

使用示例

你要为网页中的提示标记准备一个右上方向、尺寸为 40 的 CSS 三角形。

在方向中输入“右上”，将尺寸设为 40，填写一个颜色值后执行生成，并检查输出中的选择器、像素边框宽度和透明边框颜色。

结果应包含零宽度和零高度、实线边框、四个以像素表示且由尺寸运算得到的边框宽度；颜色相关的边框颜色为透明，选择器中保留右上方向文字。

使用限制

颜色输入不会改变透明边框颜色；未识别方向会采用向上边框宽度模式但保留输入文字；尺寸会直接参与运算，且没有明确的范围或正数检查。

常见错误

如果输入了未支持的方向并把它当成错误提示，原因是工具会采用向上的边框宽度模式而不是拒绝输入。请改用八个受支持的方向，并重新生成后检查选择器和边框宽度。

常见问题

不填写或填写错误的方向时会怎样？

如果不填写方向，工具会使用向上方向；如果填写未识别的文字，边框宽度模式会回退为向上，但选择器仍保留该文字。

尺寸可以省略吗？

如果不填写尺寸，工具会使用 20。填写的尺寸会参与包括除以二在内的运算，并转换为像素边框宽度；工具没有明确的范围或正数检查。

为什么填写颜色后，生成的三角形颜色没有变化？

即使填写颜色，生成结果中的边框颜色仍为透明，因此该参数不会控制三角形的显示颜色。