任務路徑 / 從輸入到結果
如何製作 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。該規則把寬度和高度設為零並宣告四條邊框，可以直接貼進任何樣式表。