-3

how to create an arrow without using image in HTML? I have a jquery plugin or Testimonials where they have created an arrow without using image by using following style :

#testimonials .item div.text:after {
    content: " ";
    border: 10px solid transparent;
    border-right-color: #fff;
    display: block;
    width: 0;
    height: 0;
    margin-top: -10px;
    position: absolute;
    left: -20px;
    top: 50%;
}

I cant figure out this styles.

Amresh Raut
  • 79
  • 5
  • 1
    Use an arrow character. – Oded Apr 29 '13 at 11:35
  • possible duplicate of [How does this CSS triangle shape work?](http://stackoverflow.com/questions/7073484/how-does-this-css-triangle-shape-work) – Bojangles Apr 29 '13 at 11:38
  • 3
    I had no idea [Google](http://hedgerwow.appspot.com/demo/arrows) [was](http://www.yuiblog.com/blog/2010/11/22/css-quick-tip-css-arrows-and-shapes-without-markup/) [broken](http://css-tricks.com/snippets/css/css-triangle/) – Bojangles Apr 29 '13 at 11:38

2 Answers2

3

← will create a ← character

→ will create a → character.

etc..

Have a look at HTML characters.

It really depends on what kind of arrow you want to create.

MMM
  • 7,221
  • 2
  • 24
  • 42
1

Either use web fonts like Font Awesome else as @Oded said, you can use an arrow character with CSS content property, in case of list or use HTML entities like ← or →

Demo

ul li:before {
     content: '→ ';
}
Mr. Alien
  • 153,751
  • 34
  • 298
  • 278