css导航菜单

Question

我试图在不使用CSS的任何图像的情况下制作导航菜单。但我不知道如何在每个菜单项的末尾加上那些三角形边框线。下面的图片会让我的想法更清晰：

CSS或JQuery的任何好东西都会有很大的帮助！

非常感谢！

Answer 1

这个网站是您可以通过CSS创建的各种形状的绝佳示例。希望这有帮助！

http://css-tricks.com/examples/ShapesOfCSS/

例如，您可以使用以下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);
}​

您当然可以根据需要旋转div。

Answer 2

我之前使用此链接在CSS中创建三角形。这可能是一个很好的起点。

http://jonrohan.me/guide/css/creating-triangles-in-css/

Answer 3

你将很难制作没有图像的多边形。查看CSS Sprites。我认为完全适合您的需求来创建重新定位背景图像以实现您正在寻找的显示效果。