jquery - css ナビゲーション メニュー

Question

CSSで画像を一切使わないナビゲーションメニューを作ろうとしています。しかし、各メニュー項目の最後に三角形の境界線を付ける方法がわかりません。次の画像は私の考えをより明確にします：

CSS や JQuery の優れたチュートリアルは、非常に役立ちます。

どうもありがとう！

Answer 1

このWebサイトは、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 スプライトを確認してください。探している表示効果を実現するために背景画像の再配置を作成することは、あなたのニーズに完全に合っていると思います。