CSS - 箭頭

上一頁
下一頁

CSS 箭頭是使用 CSS 屬性建立的圖形符號，用於將檢視者的注意力指向特定方向。CSS 中的箭頭是使用邊框、剪裁路徑或圖示等技術建立的。本教程將探討使用 CSS 建立和設定箭頭樣式的所有方法。

目錄


 

如何在 CSS 中建立箭頭？

箭頭可以使用以下 CSS 屬性建立

  • 使用 CSS 邊框：可以透過定義一個方形元素並將它相鄰的兩個邊框設定為透明，而另外兩個邊框設定為可見來建立 CSS 箭頭。
  • 使用圖示：可以使用在 Font Awesome、Material Icons 和 Google Icons 等庫中定義的預定義箭頭圖示。它們通常帶有現成的類或實用程式類。
  • 使用剪裁路徑：CSS 中的clip-path 屬性用於定義任何形狀的多邊形，您也可以用它來定義任何形狀的箭頭。
  • 使用 Unicode 字元：要建立簡單的箭頭，可以在像 div 這樣的容器內指定Unicode 字元。例如，程式碼 '▶' 將建立一個右箭頭。

使用邊框建立 CSS 箭頭

邊框是建立箭頭的最常見方法。使用邊框，我們可以建立兩種型別的箭頭：

  • 對於實心箭頭，將容器元素的高度和寬度設定為零。然後選擇任何邊框（例如，border-bottom），設定實心顏色和厚度以符合箭頭的尺寸。現在為其兩個相鄰的邊框（在本例中為 border-left 和 border-right）賦予相同的厚度，但顏色為透明。這將建立一個向上指向的箭頭。
  • 對於線條箭頭，根據所需的箭頭大小設定元素的高度和寬度。現在為任意兩個相鄰的邊框（例如 border-left 和 border-top）設定厚度和顏色。使用 transform 屬性將元素旋轉到所需的方向。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .arrow-up {
            width: 0; 
            height: 0; 
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 10px solid black;
        }

        .arrow-down{
            width: 10px;
            height: 10px;
            border-left: 2px solid;
            border-top: 2px solid;
            transform: rotate(225deg) skew(10deg, 10deg);
        }
        
        .arrow-diagonal{
            width: 10px;
            height: 10px;
            border-left: 2px solid;
            border-top: 2px solid;
            transform: rotate(90deg) skew(10deg, 10deg);
        }
    </style>
</head>

<body>
 <h3>Arrow Type 1</h3>   
    <div class="arrow-up"></div>

 <h3>Arrow Type 2</h3>
    <div class="arrow-down"></div>
    
 <h3>Arrow Rotated</h3>
    <div class="arrow-diagonal"></div>
</body>

</html>

使用圖示建立 CSS 箭頭

我們還可以使用預定義的圖示庫（如 Font Awesome、Material Icons 和 Google Icons）建立箭頭。下面的示例使用 Google 圖示顯示箭頭。

示例

<!DOCTYPE html> 
<html>

<head>
   <link rel="stylesheet" 
         href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>

<body>
    <h1> Google Fonts Icon </h1>

    <span class="material-icons" style="font-size:40px;">
        arrow_forward
    </span>
     <span class="material-icons" style="font-size:40px;">
        arrow_backward
    </span>
</body>

</html>

使用剪裁路徑屬性建立箭頭

我們可以使用 CSS 中的clip-path 屬性建立任何形狀的箭頭。

clip-path: polygon(x1 y1, x2 y2, x3 y3, ...);
  • x1 y1, x2 y2, ... 是定義多邊形頂點的座標對。座標以百分比或絕對單位（例如，px）給出。
  • 原點 (0, 0) 是元素的左上角，(100%, 100%) 是右下角。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .arrow-right {
            width: 0;
            height: 0;
            margin: 29px;
            border-style: solid;
            border-width: 10px 0 10px 20px;
            clip-path: polygon(100% 50%, 0 100%, 0 0);
        }
    </style>
</head>

<body>
    <h3> Arrow Using Clip Path </h3>
    <div class="arrow-right" ></div>
</body>

</html>

CSS 箭頭樣式

以下示例演示如何透過設定顏色、transform-rotate、陰影和動畫等屬性來設定 CSS 箭頭的樣式。

示例

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .arrow {
            width: 0;
            height: 0;
            margin: 20px;
        }

        .arrow-color {
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 10px solid red;
        }

        .arrow-shadow {
            width: 20px;
            height: 20px;
            border-left: 2px solid;
            border-top: 2px solid;
            transform: rotate(135deg) skew(10deg, 10deg);
            box-shadow: -5px -5px 10px rgba(0, 0, 0, 0.5);
        }

        .arrow-rotated {
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 10px solid black;
            transform: rotate(45deg);
        }

        .arrow-animate {
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 10px solid aqua;
            transition: transform 0.3s ease-in-out;
        }

        .arrow-animate:hover {
            transform: translateY(-10px);
        }
    </style>
</head>

<body>
    <h3>Colored Arrow</h3>
    <div class="arrow arrow-color"></div>

    <h3> Arrow with shadow </h3>
    <div class="arrow arrow-shadow"></div>

    <h3> Rotated arrow </h3>
    <div class="arrow arrow-rotated"></div>

    <h3> Animated arrow </h3>
    <div class="arrow arrow-animate"></div>
</body>

</html>

CSS 工具提示箭頭

我們可以使用 CSS 邊框和 transform 屬性建立一個帶有向上指向的三角形箭頭的工具提示。我們使用了hover 偽類，以便在使用者將滑鼠懸停在內容上時顯示工具提示。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .tooltip {
            position: relative;
            display: inline-block;
            cursor: pointer;
        }
        .tooltipContent {
            display: none;
            position: absolute;
            background-color: grey;
            color: #fff;
            padding: 8px;
            border-radius: 4px;
            z-index: 1;
            font-size: 14px;
            white-space: nowrap;
        }
        .tooltip:hover .tooltipContent {
            display: block;
        }
        .tooltipContent::before {
            content: "";
            position: absolute;
            border-width: 6px;
            border-style: solid;
            border-color: transparent transparent grey transparent;
            top: -12px;
            left: 50%;
            transform: translateX(-50%);
        }
    </style>
</head>

<body>
    <h3 class="tooltip">
        Hover Me!!!
        <span class="tooltipContent">CSS - Arrow</span>
    </h3>
</body>

</html>
列印頁面
上一頁
下一頁
廣告