I am trying to make a navigation menu without using any image by CSS. But I don't know how to have those triangular border line at the end of each menu items. Following image would make my idea more clear:
any good turorial of CSS or JQuery would be a GREAT help!
Thanks a lot!
This website is an excellent example of various shapes you can create via CSS. Hope this helps!
http://css-tricks.com/examples/ShapesOfCSS/
For example you can create a sort of "Chevron" with the following CSS
#chevron {
position: relative;
text-align: center;
padding: 12px;
margin-bottom: 6px;
height: 60px;
width: 200px;
}
#chevron:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 51%;
background: red;
-webkit-transform: skew(0deg, 6deg);
-moz-transform: skew(0deg, 6deg);
-ms-transform: skew(0deg, 6deg);
-o-transform: skew(0deg, 6deg);
transform: skew(0deg, 6deg);
}
#chevron:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 50%;
background: red;
-webkit-transform: skew(0deg, -6deg);
-moz-transform: skew(0deg, -6deg);
-ms-transform: skew(0deg, -6deg);
-o-transform: skew(0deg, -6deg);
transform: skew(0deg, -6deg);
}
You can of course rotate the div as needed.
You're going to have a hard time making those polygons without images. Check out CSS Sprites. I think it would suit your needs perfectly to create reposition background images to achieve the display effects you're looking for.
