LocalTools離線瀏覽器工具合集

分類: 開發工具

CSS 三角形產生器

站方自行規劃沒找到想要的工具？

用邊框技巧做出純 CSS 三角形

選擇方向、大小與顏色，即可建立一個尺寸為零、只靠彩色邊框呈現三角形的元素，並提供即時預覽與可直接複製的 CSS 宣告。一切都在你的瀏覽器中計算完成。

輸出
width: 0;
height: 0;
border-right: 80px solid transparent;
border-bottom: 80px solid #0f7b63;
border-left: 80px solid transparent;

本頁的所有處理都在瀏覽器中完成，不會上傳任何內容。

這個工具能做什麼

CSS 三角形其實是一個 `width: 0; height: 0;` 的方塊，其中一側邊框設定顏色，相鄰兩側的邊框則設為透明，於是只有上色那一側的楔形會顯示出來。手動設定很容易弄反——選錯該上色的那一側，或忘了把某側設為透明——所以這個工具會依方向、大小與顏色算出四條邊框宣告，並在你調整時把結果畫在真正的方塊上。

使用方式

  1. 選擇方向：上、下、左或右。
  2. 設定大小與顏色。
  3. 把邊框宣告複製進你的樣式表。

隱私說明

本工具完全在你的瀏覽器中執行。輸入的內容不會被上傳、儲存或分享，關閉分頁就隨之消失。

常見問題

會傳送任何內容到伺服器嗎？
不會。預覽是瀏覽器實際算繪出來的 CSS 邊框，宣告也是頁面內組出的文字。
為什麼三角形需要把寬與高都設為 0？
邊框技巧靠的是讓各邊框在一點會合，而不是圍出一個方塊。只要寬或高不是 0，楔形就會被撐成梯形。
可以用來做提示框或對話泡泡的箭頭嗎？
可以，這正是最常見的用法。把三角形絕對定位在提示框邊緣，並把顏色設成與提示框背景相同即可。

回到全部工具