CSS Arrows
CSS Arrows
What are CSS Arrows
Arrows are used in user interfaces to guide users and help them understand the flow of information. They provide visual cues to navigate different actions.
Arrows are an effective way to improve user experience. They are used in tooltips, drop-down menus, navigation elements, and more. This makes it easier to guide users through a process.
Arrows can be created using the following CSS properties:
- transform : This property allows you to create arrow icons by rotating an element using the rotate() function. The rotate() function accepts an angle parameter, which specifies the direction and angle of rotation.
-
border : This property allows you to create triangles by manipulating the width and height of an element’s border.
Creating CSS Arrows with the transform Property
transform : This property allows you to create arrow icons by rotating an element using the rotate() function. The rotate() function accepts an angle parameter, which specifies the direction and angle of rotation.
Example
Let’s look at an example of using the transform property to create an arrow.
<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>
Creating CSS Arrows with Borders
By adjusting the width and height of an element’s border, using the border property, we can create a triangle, thereby forming an arrow.
Example
The following example demonstrates how to use the border property to create an arrow:
<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 Arrow Styles
We can use the CSS transformations and border properties to make the arrows look more stylish, as shown in the example below.
The transform-origin: center property ensures that each arrow’s rotation 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>
Drop-Down Arrow
You can create a drop-down button with a down arrow icon. When you hover over the button, a drop-down menu appears.
Example
This is an example –
<html>
<head>
<style>
.dropdown {
position: relative;
display: inline-block;
width:98px;
}
.dropdown-btn {
background-color: #F10C0C;
color: #ffffff;
padding: 10px;
border: none;
cursor: pointer;
display: flex;
align-items: center;
}
.dropdown-content {
width:98px;
display: none;
position: absolute;
background-color: #F10C0C;
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">
Item 1
Item 2
Item 3
</div>
</div>
</body>
</html>
Tooltip
We can use the CSS borders and transform properties to create a tooltip with an upward-pointing triangle. The tooltip appears when the mouse hovers over the text and disappears when the mouse cursor moves away.
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>
<p>Bring the cursor over Tutorials Point to see the result </p>
<h3 class="tooltip">Tutorials Point
<span class="tooltipcontent">CSS - Arrow</span>
</h3>
</body>
</html>
Dynamic CSS Arrows
By using CSS animations, we can create moving and pulsating arrows, adding dynamic effects to web pages. The following example demonstrates an animated arrow that moves up and down. To create a dynamic arrow, we use 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>