期待使用伪元素来创建三角形

Question

我最近看过Chris Coyiers谈论伪元素,并且正在尝试做同样的事情.

我希望得到箭头指向右侧内容的效果

这是我想要定位的li的位置

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

你可以从jsfiddle看到我想要的风格.我认为需要改变的CSS位于CSS的顶部.

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

Answer 1

这将设置定位并创建向下箭头.数字是自定义的,可以调整以更改箭头的大小及其位置.

.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小提琴