Css 简明教程

CSS - Arrows

What is css arrows?

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

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

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

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

  2. border ：此属性允许我们通过操作元素边框的宽度和高度来创建一个三角形。

CSS Arrow Using Transform

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

Example

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

<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 属性允许我们通过操纵元素边框的宽度和高度来创建三角形，从而产生箭头。

Example

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

<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 属性使箭头看起来更时尚，如下例所示。

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

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

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

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 属性创建一个带有向上三角形箭头的工具提示。将鼠标悬停在文本文本上时，工具提示将显示，当鼠标指针移出文本文本时，工具提示将消失 −

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 规则定义了一组动画，该动画会应用到箭头 −

<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>