希望使用伪元素来创建三角形答案

【问题标题】：Looking to use pseudo elements to create a triangle希望使用伪元素来创建三角形
【发布时间】：2013-10-01 08:20:32
【问题描述】：

我最近看到 Chris Coyiers 谈论伪元素，并希望尝试做同样的事情。

我正在寻找指向右侧内容的箭头的效果

这是我要定位的 li 的位置

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

你可以从 jsfiddle 中看到我想要的风格。我认为需要更改的 css 在 css 的顶部。

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

【问题讨论】：

标签： css elements

【解决方案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

【讨论】：

太棒了，我怎样才能让箭头指向正确？而那个点是在指向内容的 li 的末尾。喜欢这里的trailers.apple.com/trailers/paramount/eagleeye
玩转边框颜色，看看箭头是如何变化的。基本上，无论您希望箭头指向哪种方式，都将 OPOSITE 侧更改为白色。因此，指向右侧，您希望 LEFT 边框颜色为白色。请注意，您可能必须使用位置编号才能将其准确地放在您想要的位置，

【解决方案2】：

我这样做是为了别的，但它也应该对你有用...

.pdfLink:before {
content:"\25BA";
color:#FF0000;
font-family: Arial,Helvetica,sans-serif;

}

我尝试过的所有代码都可以工作。我不记得我是如何遇到这种 char 代码格式的，但如果您查看此char description，格式就很明显了。

【讨论】：