CSS generated shapes

Question

Recently I was making a web app, where I used zero images, I mean for the background gradient I used CSS3 gradients, all other shapes for example navbar, boxes, buttons everything are made from CSS3, so the page will have only 150X150 image of the user at whom profile we are looking. (the website is a local community discussion board).

I used javaScript, and not the jQuery. (the point is that I wanna make the website Super Fast).

Now I want to make the arrows for the previous and next, but I don't wanna use images, I wanna use the CSS3 again. I played with a lot with CSS, and search a bit on google too, but I don't know how to decrease one corner of the box so that its pointed and give the illusion of the arrow.

Would anyone help me in making the arrows with CSS3 ?

*but now I am failed to find it* **[SERIOUSLY](https://www.google.co.in/search?q=css3+triangles&ie=utf-8&oe=utf-8&rls=org.mozilla:en-US:official&client=firefox-a&channel=sb&gfe_rd=ctrl&ei=4G8ZU8TtGqyOiAfJwoAg&gws_rd=cr)**? — Mr. Alien, Mar 07 '14 at 07:06
possible duplicate of [How does this CSS triangle shape work?](http://stackoverflow.com/questions/7073484/how-does-this-css-triangle-shape-work) — web-tiki, Jul 15 '14 at 12:22

score 0 · Accepted Answer · answered Mar 07 '14 at 07:07

Try this,

.arrow {
    height: 0;
    width: 0;
    margin-bottom: 1em;
}

.up {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid red;
}

.down {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid blue;
}

.left {
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid green;
}

.right {
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid grey;
}

..

have copied this code from a course on CSS, (TutsPlus CSS Tips and Tricks).

Yes ArifBangash, this is what I was looking for. – user3391450 Mar 07 '14 at 07:09 — user3391450, Mar 07 '14 at 07:09

CSS generated shapes

1 Answers1