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>
打印页面
上一页
下一页
广告