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.

Arrows can be created using CSS properties as listed below:

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

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

CSS Arrow Using Transform

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

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

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

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

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

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

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

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