How to create triangle or caret icons using CSS

Topic: HTML / CSS« Prev|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. Check out the following 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: 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:

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.