Css 简明教程

CSS - Arrows

What is css arrows?

箭头用于用户界面，帮助用户和他们理解信息的流程。它们提供可视化的线索以浏览不同的操作。

Arrows are used in user interfaces to guide users and help them understand the flow of information. They provide visual clues to navigate through different actions.

箭头是改善用户体验的有效方法。它们在工具提示、下拉菜单和导航元素中使用。这有助于引导用户完成一个过程。

Arrows are an effective way to improve the user experience. They are used in tooltips, dropdown menus, navigation elements, and more. This makes it easier to guide users through a process.

可以使用CSS属性（如下所示）来创建箭头：

Arrows can be created using CSS properties as listed below:

  1. transform: This property can be used to create arrow icons by rotating elements using the rotate() function. The rotate() function takes an angle as its argument, which specifies the direction and amount of rotation.

  2. border: This property allows us to create a triangle by manipulating the width and height of the element’s border.

CSS Arrow Using Transform

通过使用 rotate() 函数旋转元素， transform 属性可用于创建箭头图标。rotate() 函数将其 angle 作为其参数，该参数指定旋转的方向和数量 −

The transform property can be used to create arrow icons by rotating elements using the rotate() function. The rotate() function takes an angle as its argument, which specifies the direction and amount of rotation −

Example

让我们看一个使用 transform 属性创建箭头的示例。

Let us see an example for creating an arrow using transform property.

<html>
<head>
<style>
   .arrow-container {
      display: flex;
      align-items: center;
   }
   .arrow {
      display: inline-block;
      margin-right: 30px;
      width: 15px;
      height: 15px;
      border-top: 2px solid #000;
      border-right: 2px solid #000;
   }
   .right-arrow {
      transform: rotate(45deg);
   }
   .left-arrow {
      transform: rotate(-135deg);
   }
   .up-arrow {
      transform: rotate(-45deg);
   }
   .down-arrow {
      transform: rotate(135deg);
   }
   .top-narrow-arrow {
      transform: rotate(-45deg) skew(-15deg, -15deg);
   }
   .top-wide-arrow {
      transform: rotate(-45deg) skew(7deg, 7deg);
   }
   .top-left-arrow {
      transform: rotate(-90deg) skew(-10deg, -10deg);
   }
   .top-right-arrow {
      transform: rotate(0) skew(-10deg, -10deg);
   }
   .bottom-left-arrow {
      transform: rotate(180deg) skew(-10deg, -10deg);
   }
   .bottom-right-arrow {
      transform: rotate(90deg) skew(-10deg, -10deg);
   }
</style>
</head>
<body>
   <p class="arrow-container"><span class="arrow right-arrow"></span> - This arrow points to the right.</p>
   <p class="arrow-container"><span class="arrow left-arrow"></span> - This arrow points to the left.</p>
   <p class="arrow-container"><span class="arrow up-arrow"></span> - This arrow points upwards.</p>
   <p class="arrow-container"><span class="arrow down-arrow"></span> - This arrow points downwards.</p>
   <p class="arrow-container"><span class="arrow top-narrow-arrow"></span> - This arrow points top and is narrow.</p>
   <p class="arrow-container"><span class="arrow top-wide-arrow"></span> - This arrow points top and is wide.</p>
   <p class="arrow-container"><span class="arrow top-left-arrow"></span> - This arrow points top left.</p>
   <p class="arrow-container"><span class="arrow top-right-arrow"></span> - This arrow points top right.</p>
   <p class="arrow-container"><span class="arrow bottom-left-arrow"></span> - This arrow points bottom left.</p>
   <p class="arrow-container"><span class="arrow bottom-right-arrow"></span> - This arrow points bottom right.</p>
</body>
</html>

CSS Arrow Using Border

border 属性允许我们通过操纵元素边框的宽度和高度来创建三角形，从而产生箭头。

The border property allows us to create a triangle by manipulating the width and height of the element’s border and hence resulting in an arrow.

Example

以下示例演示了使用 border 属性创建箭头的过程：

Following example demonstrates use of border property to create arrows:

<html>
<head>
<style>
   .arrow-container {
      display: flex;
      align-items: center;
   }
   .left-arrow,
   .right-arrow,
   .up-arrow,
   .down-arrow {
      width: 0;
      height: 0;
      margin: 5px;
   }
   .left-arrow,
   .right-arrow {
      border-top: 18px solid transparent;
      border-bottom: 18px solid transparent;
   }
   .up-arrow,
   .down-arrow {
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
   }
   .right-arrow {
      border-left: 25px solid #F10C0C;
   }
   .left-arrow {
      border-right: 25px solid #F10C0C;
   }
   .up-arrow {
      border-bottom: 25px solid #F10C0C;
   }
   .down-arrow {
      border-top: 25px solid #F10C0C;
   }
</style>
</head>
<body>
   <p class="arrow-container"><span class="right-arrow"></span> - This arrow points to the right.</p>
   <p class="arrow-container"><span class="left-arrow"></span> - This arrow points to the left.</p>
   <p class="arrow-container"><span class="up-arrow"></span> - This arrow points to the upwards.</p>
   <p class="arrow-container"><span class="down-arrow"></span> - This arrow points to the downwards.</p>
</body>
</html>

CSS Arrows Styling

我们可以使用 CSS transformations 和 border 属性使箭头看起来更时尚，如下例所示。

We can make arrows look more stylish using CSS transformations and border properties as demonstared in the following example.

transform-origin: center 属性确保每个箭头的旋转绕其中心点进行。

The transform-origin: center property ensures that the rotation of each arrow occurs around its center point.

Example

示例如下：

Here is an example −

<html>
<head>
<style>
   .arrow-container {
      display: flex;
      align-items: center;
   }
   .left-arrow,
   .right-arrow,
   .up-arrow,
   .down-arrow {
      display: inline-block;
      margin: 30px;
      width: 15px;
      height: 15px;
      border-top: 2px solid #F10C0C;
      border-left: 2px solid #F10C0C;
      transform-origin: center;
   }
   .right-arrow {
      transform: rotate(135deg);
   }
   .left-arrow {
      transform: rotate(-45deg);
   }
   .up-arrow {
      transform: rotate(45deg);
   }
   .down-arrow {
      transform: rotate(-135deg);
   }
   .right-arrow::after,
   .left-arrow::after,
   .up-arrow::after,
   .down-arrow::after {
      content: "";
      display: block;
      width: 2px;
      height: 45px;
      background-color: #F10C0C;
      transform: rotate(-45deg) translate(15px, 4px);
   }
</style>
</head>
<body>
   <p class="arrow-container">Right Arrow - <span class="right-arrow"></span></p>
   <p class="arrow-container">Left Arrow - <span class="left-arrow"></span></p>
   <p class="arrow-container">Up Arrow - <span class="up-arrow"></span></p>
   <p class="arrow-container">Down Arrow - <span class="down-arrow"></span></p>
</body>
</html>

Dropdown Arrow

您可以创建一个带有向下箭头图标的下拉按钮。当您将鼠标悬停在按钮上时，将出现下拉菜单 −

You can create a dropdown button with a downward-pointing arrow icon. When you hover over the button, the dropdown menu appears −

Example

示例如下：

Here is an example −

<html>
<head>
<style>
   .dropdown {
      position: relative;
      display: inline-block;
   }
   .dropdown-btn {
      background-color: #F10C0C;
      color: #ffffff;
      padding: 10px;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
   }
   .dropdown-content {
      display: none;
      position: absolute;
      background-color: #28992e;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      z-index: 1;
   }
   .dropdown-btn::after {
      content: "";
      width: 0;
      height: 0;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-top: 6px solid white;
      margin-left: 5px;
   }
   .dropdown:hover .dropdown-content {
      display: block;
   }
   .dropdown-item {
      padding: 10px;
      text-decoration: none;
      color: #ffffff;
      display: block;
   }
</style>
</head>
<body>
   <div class="dropdown">
      <button class="dropdown-btn">Dropdown</button>
      <div class="dropdown-content">
         <a href="#" class="dropdown-item">Item 1</a>
         <a href="#" class="dropdown-item">Item 2</a>
         <a href="#" class="dropdown-item">Item 3</a>
      </div>
   </div>
</body>
</html>

Tooltip Arrow

我们可以利用 CSS 中的 borders 和 transform 属性创建一个带有向上三角形箭头的工具提示。将鼠标悬停在文本文本上时，工具提示将显示，当鼠标指针移出文本文本时，工具提示将消失 −

We can create a tooltip with an upward-pointing triangular arrow using CSS borders and the transform property. When you hovered over the text tooltip will dispaly and disappears when the mouse cursor is moved away from the text −

Example

示例如下：

Here is an example −

<html>
<head>
<style>
   .tooltip {
      position: relative;
      display: inline-block;
      cursor: pointer;
   }
   .tooltipcontent {
      display: none;
      position: absolute;
      background-color: #F10C0C;
      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 #F10C0C transparent;
      top: -12px;
      left: 50%;
      transform: translateX(-50%);
   }
</style>
</head>
<body>
   <h3 class="tooltip">Tutorialspoint
      <span class="tooltipcontent">CSS - Arrow</span>
   </h3>
</body>
</html>

Animated CSS Arrows

通过使用 CSS 动画，我们可以创建动态效果，让箭头动起来。以下示例演示了一个可以上下移动的动画箭头。为了创建一个动画箭头，我们在 CSS 中使用 @keyframes 规则定义了一组动画，该动画会应用到箭头 −

By using CSS animations, we can create arrows that move and pulse, adding a dynamic effect to the web pages. The following example demonstrates an animated arrow that moves up and down. To create an animated arrow, we have used the @keyframes rule in CSS to define a set of animations that will be applied to the arrow −

<html>
<head>
<style>
   .arrow-container {
      display: flex;
      align-items: center;
   }
   .left-arrow
   {
      width: 0;
      height: 0;
      margin: 5px;
   }
   .left-arrow
   {
      border-top: 18px solid transparent;
      border-bottom: 18px solid transparent;
   }

   .left-arrow {
      border-right: 25px solid #F10C0C;
   }
   .arrow-move {
      position: relative;
      animation: move 2s ease-in-out infinite;
   }
   @keyframes move {
      0% {
         transform: translateY(0);
      }
      50% {
         transform: translateY(-10px);
      }
      100% {
         transform: translateY(0);
      }
   }
</style>
</head>
<body>
   <p class="arrow-container"><span class="left-arrow arrow-move"></span> - This arrow points to the left.</p>
</body>
</html>