css - 希望使用伪元素创建三 Angular 形

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 Fiddle