CSS 純樣式繪製三角形與立體按鈕：Border 技巧完全指南

核心原理：零尺寸元素 + 寬邊框

當元素 width: 0; height: 0; 時，四條邊框交汇形成四個三角形，顏色由各邊框色決定。

步驟 1：顯示四個三角形

.square {
    width: 0; height: 0;
    border-top:    50px solid red;
    border-bottom: 50px solid green;
    border-left:   50px solid yellow;
    border-right:  50px solid blue;
}

步驟 2：提取單一三角形（隱藏其餘三邊）

.arrow-up {
    width: 0; height: 0;
    border-top:    50px solid #000;   /* 顯示 */
    border-bottom: none;              /* 隱藏 */
    border-left:   50px solid transparent;  /* 透明佔位 */
    border-right:  50px solid transparent;
}

步驟 3：Hover 翻轉動畫

.arrow-up:hover {
    border-top:    none;
    border-bottom: 50px solid #000;
    border-left:   50px solid transparent;
    border-right:  50px solid transparent;
}

立體圓形按鈕實現

.btn {
    width: 100px; height: 100px;
    background: #ccc;
    border-radius: 50%;
    box-shadow: 5px 5px 10px #000;       /* 外陰影 → 凸起感 */
}
.btn:active {
    background: #bbb;
    box-shadow: 5px 5px 10px #000 inset; /* 內陰影 → 按下感 */
}

關鍵技巧總結

• 三角形本質：width/height=0 + 等寬邊框 + 透明色控制可見面
• 方向控制：保留目標方向邊框色，其餘設 transparent 或 none
• 立體感：box-shadow 外陰影/內陰影切換 + :active 偽類
• 無需圖片、無額外標籤、純 CSS 輕量實現