html tutorial - How to create triangle or caret icons using CSS - html5 - html code - html form
Answer: Use transparent color for borders
Using the mixture of transparent and solid colours for the borders of components you can simply produce triangle or caret icons pointing up, down, left or right directions that does not have any CSS width and height. check up on the subsequent example:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Making Directional Triangle or Caret Icons with CSS</title>
<style type="text/css">
.caret {
width: 0;
height: 0;
display: inline-block;
border: 10px solid transparent;
}
.caret.down{
border-top-color: red;
}
.caret.right{
border-left-color: red;
}
.caret.up{
border-bottom-color: red;
}
.caret.left{
border-right-color: red;
}
</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>