希望使用伪元素创建三角形 [英] Looking to use pseudo elements to create a triangle

问题描述

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

I recently watched Chris Coyiers talk about pseudo elements and was looking to try and do the same.

我希望获得指向箭头的效果右边的内容

I am looking to get the effect of an arrow pointing to the content on the right

这是我要定位的li的位置

This is the location of the li that I want to target

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

您可以从jsfiddle中看到我想要的样式。我认为需要更改的CSS位于CSS的顶部。

You can see from the jsfiddle the style I am going for. I think the css that needs to be changed is at the top of the css.

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

推荐答案

定位并创建向下箭头。这些数字是自定义的，可以调整以更改箭头的大小及其位置。

This will set the positioning and create a down pointing arrow. The numbers are custom and can be adjusted to change the size of the arrow and its position.

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

这篇关于希望使用伪元素创建三角形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！