How to Make A Chevron Arrow Using CSS

Question

Ok  so everyone knows you can make a triangle using this   triangle       width  0      height  0      border-left  50px solid transparent      border-right  50px solid transparent      border-bottom  100px solid red     And that produces a solid  filled in triangle  But how would you make a hollow-type arrow-like triangle  like this

User · Answer

Left Right Arrow with hover effect using Roko C. Buljan box-shadow trick

_x000D_

.arr {_x000D_
  display: inline-block;_x000D_
  padding: 1.2em;_x000D_
  box-shadow: 8px 8px 0 2px #777 inset;_x000D_
}_x000D_
.arr.left {_x000D_
  transform: rotate(-45deg);_x000D_
}_x000D_
.arr.right {_x000D_
  transform: rotate(135deg);_x000D_
}_x000D_
.arr:hover {_x000D_
  box-shadow: 8px 8px 0 2px #000 inset_x000D_
}

_x000D_

<div class="arr left"></div>_x000D_
<div class="arr right"></div>

_x000D_

User · Answer

x000D   x000D   arrow   x000D    display   inline-block  x000D    font-size  10px     adjust size    x000D    line-height  1em     adjust vertical positioning    x000D    border  3px solid  000000  x000D    border-left  transparent  x000D    border-bottom  transparent  x000D    width  1em     use font-size to change overall size    x000D    height  1em     use font-size to change overall size    x000D    x000D   x000D   arrow before   x000D    content    00a0      needed to hook line-height to  something     x000D    x000D   x000D   arrow left   x000D    margin-left  0 5em  x000D    -webkit-transform  rotate 225deg   x000D    -moz-transform  rotate 225deg   x000D    -o-transform  rotate 225deg   x000D    -ms-transform  rotate 225deg   x000D    transform  rotate 225deg   x000D    x000D   x000D   arrow right   x000D    margin-right  0 5em  x000D    -webkit-transform  rotate 45deg   x000D    -moz-transform  rotate 45deg   x000D    -o-transform  rotate 45deg   x000D    -ms-transform  rotate 45deg   x000D    transform  rotate 45deg   x000D    x000D   x000D   arrow top   x000D    line-height  0 5em     use this to adjust vertical positioning    x000D    margin-left  0 5em  x000D    margin-right  0 5em  x000D    -webkit-transform  rotate -45deg   x000D    -moz-transform  rotate -45deg   x000D    -o-transform  rotate -45deg   x000D    -ms-transform  rotate -45deg   x000D    transform  rotate -45deg   x000D    x000D   x000D   arrow bottom   x000D    line-height  2em  x000D       use this to adjust vertical positioning    x000D    margin-left  0 5em  x000D    margin-right  0 5em  x000D    -webkit-transform  rotate 135deg   x000D    -moz-transform  rotate 135deg   x000D    -o-transform  rotate 135deg   x000D    -ms-transform  rotate 135deg   x000D    transform  rotate 135deg   x000D    x000D   lt div gt  x000D    here are some arrows x000D     lt div class  arrow left  gt  lt  div gt  space x000D     lt div class  arrow right  gt  lt  div gt  space x000D     lt div class  arrow top  gt  lt  div gt  space x000D     lt div class  arrow bottom  gt  lt  div gt  space with proper spacing  x000D   lt  div gt  x000D   x000D   x000D    Similar to Roko C  but a little more control over size and placement

User · Answer

Here s a different approach   1  Use the multiplication character   amp times   times    2  Hide half of it with overflow hidden   3  Then add a triangle as a pseudo element for the tip   The advantage here is that no transforms are necessary   It will work in IE8    FIDDLE   x000D   x000D   arrow   x000D    position  relative  x000D    x000D   arrow before   x000D    content        x000D    display  inline-block  x000D    position  absolute  x000D    font-size  240px  x000D    font-weight  bold  x000D    font-family  verdana  x000D    width  103px  x000D    height  151px  x000D    overflow  hidden  x000D    line-height  117px  x000D    x000D   arrow after   x000D    content      x000D    display  inline-block  x000D    position  absolute  x000D    left  101px  x000D    top  51px  x000D    width  0  x000D    height  0  x000D    border-style  solid  x000D    border-width  25px 0 25px 24px  x000D    border-color  transparent transparent transparent black  x000D    x000D   lt div class  arrow  gt  lt  div gt  x000D   x000D   x000D

User · Answer

I needed to change an input to an arrow in my project  Below is final work    x000D   x000D   in submit   x000D    background-color  white  x000D    border-left   B4C8E9  x000D    border-top   B4C8E9  x000D    border-right  3px solid black  x000D    border-bottom  3px solid black  x000D    width  15px  x000D    height  15px  x000D    transform  rotate -45deg   x000D    margin-top  4px  x000D    margin-left  4px  x000D    position  absolute  x000D    cursor  pointer  x000D    x000D   lt input id  in submit  type  button  class  convert btn  gt  x000D   x000D   x000D    Here Fiddle

User · Answer

An other approach using borders and no CSS3 properties     x000D   x000D  div  div after  x000D      border-width  80px 0 80px 80px  x000D      border-color  transparent transparent transparent  000  x000D      border-style solid  x000D      position relative  x000D    x000D  div after  x000D      content     x000D      position absolute  x000D      left -115px  top -80px  x000D      border-left-color  fff  x000D    x000D   lt div gt  lt  div gt  x000D   x000D   x000D

User · Answer

gt  itself is very wonderful arrow  Just prepend a div with it and style it    x000D   x000D  div  x000D    font-size 50px  x000D    x000D  div  before  x000D    content   gt    x000D    font  50px  Consolas   x000D    font-weight 900  x000D    x000D   lt div class  arrowed  gt Hatz  lt  div gt  x000D   x000D   x000D

User · Answer

Just use before and after Pseudo-elements - CSS    x000D   x000D    box-sizing  border-box  padding  0  margin  0  x000D   root background  white  transition  background  3s ease-in-out  x000D   root hover background  red   x000D  div  x000D    margin  20px auto  x000D    width  150px  x000D    height  150px  x000D    position relative x000D    x000D   x000D  div before  div after  x000D    content      x000D    position  absolute  x000D    width  75px  x000D    height  20px  x000D    background  black  x000D    left  40px x000D    x000D   x000D  div before  x000D    top  45px  x000D    transform  rotateZ 45deg  x000D    x000D   x000D  div after  x000D    bottom  45px  x000D    transform  rotateZ -45deg  x000D    x000D   lt div  gt  x000D   x000D   x000D

User · Answer

Responsive Chevrons   arrows they resize automatically with your text and are colored the same color  Plug and play    jsBin demo playground   x000D   x000D  body    font-size  25px     Change font and  see the magic       color   f07         Change color and see the magic            RESPONSIVE ARROWS     class  arr-     border        solid currentColor    border-width  0  2em  2em 0    display       inline-block    padding        20em     arr-right  transform rotate -45deg     arr-left   transform rotate 135deg     arr-up     transform rotate -135deg     arr-down   transform rotate 45deg    x000D  This is  lt i class  arr-right  gt  lt  i gt   arr-right lt br gt  This is  lt i class  arr-left  gt  lt  i gt   arr-left lt br gt  This is  lt i class  arr-up  gt  lt  i gt   arr-up lt br gt  This is  lt i class  arr-down  gt  lt  i gt   arr-down x000D   x000D   x000D

User · Answer

This can be solved much easier than the other suggestions   Simply draw a square and apply a border property to just 2 joining sides   Then rotate the square according to the direction you want the arrow to point  for exaple  transform  rotate  lt your degree here gt     x000D   x000D   triangle   x000D      border-right  10px solid   x000D      border-bottom  10px solid  x000D      height  30px  x000D      width  30px  x000D      transform  rotate -45deg   x000D    x000D   lt div class  triangle  gt  lt  div gt  x000D   x000D   x000D

User · Answer

You can use the before or after pseudo-element and apply some CSS to it  There are various ways  You can add both before and after  and rotate and position each of them to form one of the bars  An easier solution is adding two borders to just the before element and rotate it using transform  rotate   Scroll down for a different solution that uses an actual element instead of the pseuso elements  In this case  I ve added the arrows as bullets in a list and used em sizes to make them size properly with the font of the list    x000D   x000D  ul   x000D      list-style  none  x000D    x000D   x000D  ul big   x000D      list-style  none  x000D      font-size  300  x000D    x000D   x000D  li  before   x000D      position  relative  x000D         top  3pt  Uncomment this to lower the icons as requested in comments   x000D      content      x000D      display  inline-block  x000D         By using an em scale  the arrows will size with the font    x000D      width  0 4em  x000D      height  0 4em  x000D      border-right  0 2em solid black  x000D      border-top  0 2em solid black  x000D      transform  rotate 45deg   x000D      margin-right  0 5em  x000D    x000D   x000D     Change color    x000D  li hover   x000D    color  red     For the text    x000D    x000D  li hover  before   x000D    border-color  red     For the arrow  which is a border     x000D    x000D   lt ul gt  x000D       lt li gt Item1 lt  li gt  x000D       lt li gt Item2 lt  li gt  x000D       lt li gt Item3 lt  li gt  x000D       lt li gt Item4 lt  li gt  x000D   lt  ul gt  x000D   x000D   lt ul class  big  gt  x000D       lt li gt Item1 lt  li gt  x000D       lt li gt Item2 lt  li gt  x000D       lt li gt Item3 lt  li gt  x000D       lt li gt Item4 lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    Of course you don t need to use before or after  you can apply the same trick to a normal element as well  For the list above it is convenient  because you don t need additional markup  But sometimes you may want  or need  the markup anyway  You can use a div or span for that  and I ve even seen people even recycle the i element for  icons   So that markup could look like below  Whether using  lt i gt  for this is right is debatable  but you can use span for this as well to be on the safe side    x000D   x000D     Default icon formatting    x000D  i   x000D    display  inline-block  x000D    font-style  normal  x000D    position  relative  x000D    x000D   x000D     Additional formatting for arrow icon    x000D  i arrow   x000D         top  2pt  Uncomment this to lower the icons as requested in comments   x000D      width  0 4em  x000D      height  0 4em  x000D      border-right  0 2em solid black  x000D      border-top  0 2em solid black  x000D      transform  rotate 45deg   x000D    x000D  And so you can have an  lt i class  arrow  title  arrow icon  gt  lt  i gt  in your text  x000D  This arrow is  lt i class  arrow  title  arrow icon  gt  lt  i gt  used to be deliberately lowered slightly on request  x000D  I removed that for the general public  lt i class  arrow  title  arrow icon  gt  lt  i gt  but you can uncomment the line with  top   lt i class  arrow  title  arrow icon  gt  lt  i gt  to restore that effect  x000D   x000D   x000D    If you seek more inspiration  make sure to check out this awesome library of pure CSS icons by Nicolas Gallagher

[html] How to Make A Chevron Arrow Using CSS?

Examples related to html

Examples related to css

Examples related to css-shapes