6

私は最近、Chris Coyiers が疑似要素について話しているのを見て、同じことをしようと考えていました。

右側のコンテンツを指す矢印の効果を得たいと考えています

狙いたいリーの場所はここ

.overviews-list > li.active > ul.submenu > li.active

jsfiddle から、私が目指しているスタイルを見ることができます。変更が必要なcssはcssの先頭にあると思います。

http://jsfiddle.net/T2HuD/1/

4

2 に答える 2

9

これにより、配置が設定され、下向きの矢印が作成されます。数値はカスタムで、矢印のサイズと位置を変更するために調整できます。

.overviews-list > li.active > ul.submenu > li.active {
  position: relative;
}

.overviews-list > li.active > ul.submenu > li.active:after {
  position: absolute;
  content: "";
  width: 0px;
  height: 0px;
  border-top: 15px solid white;
  border-right: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 15px solid transparent;
  top: 25%;
  right: 10px;
}

JSフィドル

于 2013-09-25T17:51:50.137 に答える