任务路径 / 从输入到结果
如何制作 CSS 三角形
- 01
选择方向
在“方向”下选择“向上”“向右”“向下”或“向左”。预览会立即更新——这个技巧为一条边框上色，其余相邻边框保持透明。工作区初始是一个向上的三角形。
- 02
设置尺寸
将“底边宽度”和“三角形高度”分别设为 8–180 px，步进 1 px。朝上或朝下时，宽度是底边，高度是到尖角的距离；朝左或朝右时，高度是竖直底边，宽度是水平伸出距离。默认图形横向占 72 px、纵向占 64 px。
- 03
选择填充颜色
把“填充颜色”设为任意六位十六进制值，默认是 #0f4cff。实时预览与生成的 border-color 声明始终保持一致，所见即所复制。
- 04
检查预览状态
实时预览随每次修改重新渲染；当所有取值都在范围内时，状态标记显示“CSS 有效”。超出范围的值会把它变为“检查取值”，并阻止复制和下载，直到你修正高亮的控件。
- 05
试用示例预设
“加载示例”会设置向右的三角形：水平伸出 104 px、竖直底边 86 px、填充色 #ffd11a。“重置”恢复默认值。
- 06
复制或下载 CSS
点击“复制 CSS”把 .triangle 规则复制到剪贴板，或点击“下载 .css”将其保存为 toolars-triangle.css。该规则把宽度和高度设为零并声明四条边框，可以直接粘贴进任何样式表。