html - How to Make A Fancy Arrow Using CSS? -

ok, knows can make triangle using this:

#triangle {     width: 0;     height: 0;     border-left: 50px solid transparent;     border-right: 50px solid transparent;     border-bottom: 100px solid red; } 

and produces solid, filled in triangle. how make hollow-type arrow-like triangle, this?

you can use before or after pseudo-element , apply css it. there various ways. can add both before , after, , rotate , position each of them form 1 of bars. easier solution adding 2 borders before element , rotate using transform: rotate.

scroll down different solution uses actual element instead of pseuso elements

in case, i've added arrows bullets in list , used em sizes make them size font of list.

ul {      list-style: none;  }    ul.big {      list-style: none;      font-size: 300%  }    li::before {      position: relative;      /* top: 3pt; uncomment lower icons requested in comments*/      content: "";      display: inline-block;      /* using em scale, arrows size font */      width: 0.4em;      height: 0.4em;      border-right: 0.2em solid black;      border-top: 0.2em solid black;      transform: rotate(45deg);      margin-right: 0.5em;  }    /* change color */  li:hover {    color: red; /* text */  }  li:hover::before {    border-color: red; /* arrow (which border) */  }

<ul>      <li>item1</li>      <li>item2</li>      <li>item3</li>      <li>item4</li>  </ul>    <ul class="big">      <li>item1</li>      <li>item2</li>      <li>item3</li>      <li>item4</li>  </ul>

of course don't need use before or after, can apply same trick normal element well. list above convenient, because don't need additional markup. may want (or need) markup anyway. can use div or span that, , i've seen people recycle i element 'icons'. markup below. whether using <i> right debatable, can use span on safe side.

/* default icon formatting */  {    display: inline-block;    font-style: normal;    position: relative;  }    /* additional formatting arrow icon */  i.arrow {      /* top: 2pt; uncomment lower icons requested in comments*/      width: 0.4em;      height: 0.4em;      border-right: 0.2em solid black;      border-top: 0.2em solid black;      transform: rotate(45deg);  }

and can have <i class="arrow" title="arrow icon"></i> in text.  arrow <i class="arrow" title="arrow icon"></i> used deliberately lowered on request.  removed general public <i class="arrow" title="arrow icon"></i> can uncomment line 'top' <i class="arrow" title="arrow icon"></i> restore effect.

if seek more inspiration, make sure check out awesome library of pure css icons nicolas gallagher. :)