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>

      Related Searches to How to create triangle or caret icons using CSS