Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
How to create arrows with CSS?
With CSS, we can easily design arrows on a web page. This includes the top, bottom, left, and right arrows. Arrow is created using the border properties and then rotated to form an arrow. The rotation is performed using the rotate() method of the transform property. Let us see how to create top, bottom, left, and right arrows on a web page with HTML and CSS.
HTML for arrows
Under the <p> element, set the <i> element to create a design for arrows −
<h2>CSS Arrows</h2> <p>Right arrow: <i class="rightArrow"></i></p> <p>Left arrow: <i class="leftArrow"></i></p> <p>Up arrow: <i class="upArrow"></i></p> <p>Down arrow: <i class="downArrow"></i></p>
Style the i element
The <i> element differentiates a text from the surrounding texts. Indicate terms and set a different mood for the text with <i>. The border properties styles the design for thr arrows:
i {
border: solid rgb(62, 19, 182);
border-width: 0 6px 6px 0;
display: inline-block;
padding: 3px;
}
Transform the right arrow
Use the transform property with the rotate() method to create an arrow. To convert the design to right arrow, rotate -45degrees −
.rightArrow {
transform: rotate(-45deg);
}
Transform the left arrow
Use the transform property with the rotate() method to create an arrow. To convert the design to left arrow, rotate 135degrees −
.leftArrow {
transform: rotate(135deg);
}
Transform the up arrow
Use the transform property with the rotate() method to create an arrow. To convert the design to up arrow, rotate -135degrees −
.upArrow {
transform: rotate(-135deg);
}
Transform the down arrow
Use the transform property with the rotate() method to create an arrow. To convert the design to down arrow, rotate 45degrees −
.downArrow {
transform: rotate(45deg);
}
Example
To create arrows with CSS, the code is as follows −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
padding: 20px;
}
i {
border: solid rgb(62, 19, 182);
border-width: 0 6px 6px 0;
display: inline-block;
padding: 3px;
}
p {
font-size: 18px;
font-weight: 500;
}
.rightArrow {
transform: rotate(-45deg);
}
.leftArrow {
transform: rotate(135deg);
}
.upArrow {
transform: rotate(-135deg);
}
.downArrow {
transform: rotate(45deg);
}
</style>
</head>
<body>
<h2>CSS Arrows</h2>
<p>Right arrow: <i class="rightArrow"></i></p>
<p>Left arrow: <i class="leftArrow"></i></p>
<p>Up arrow: <i class="upArrow"></i></p>
<p>Down arrow: <i class="downArrow"></i></p>
</body>
</html>
703 Views
