0

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:enter image description here

any good turorial of CSS or JQuery would be a GREAT help!

Thanks a lot!

4

2 回答 2

2

这个网站是你可以通过 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。

于 2013-01-22T17:49:26.963 回答
0

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

于 2013-01-22T17:51:12.763 回答