How to create triangle or caret icons using CSS
Topic: HTML / CSSPrev|Next
Answer: Use transparent color for borders
You can easily create triangle or caret icons pointing up, down, left or right directions using the combination of transparent and solid colors for the borders of elements that doesn't have any CSS width and height. Let's check out an example to understand how it really works:
Example
Try this code »<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Making Directional Triangle or Caret Icons with CSS</title>
<style>
.caret {
width: 0;
height: 0;
display: inline-block;
border: 10px solid transparent;
}
.caret.down{
border-top-color: black;
}
.caret.right{
border-left-color: black;
}
.caret.up{
border-bottom-color: black;
}
.caret.left{
border-right-color: black;
}
</style>
</head>
<body>
<h3>Triangle or Caret Icon Pointing Down</h3>
<div><span class="caret down"></span></div>
<hr>
<h3>Triangle or Caret Icon Pointing Right</h3>
<div><span class="caret right"></span></div>
<hr>
<h3>Triangle or Caret Icon Pointing Up</h3>
<div><span class="caret up"></span></div>
<hr>
<h3>Triangle or Caret Icon Pointing Left</h3>
<div><span class="caret left"></span></div>
</body>
</html>Related FAQ
Here are some more FAQ related to this topic:
