Make arrows and triangles with CSS only - no images
Make arrows and triangles with CSS only - no images So today I wanted to make an arrow like the one below but I wanted to do this with CSS and not using a background image. As you'll know you can now make rounded corners using CSS3, but what about triangles and arrows like the one above? The answer is to use a trick with element borders. Essentially when you make a big border on a tiny box they intersect in a triangle like this image. Then all you do is make three sides transparent so you see a triangle. This triangle is then added using the :after pseudo-element to stick it onto a div box with the text inside. Here is the CSS code for a div tag with an id="arrow" just like my blue one above. #arrow {background-color: #3366cc; height: 30px; position: relative; width: 130px;color:#FFF;} #arrow:after {content: ' '; height: 0; position: absolute; width: 0; border: 15px solid transparent; border-left-color: #3366cc;left: 100%;top: 0px;}