我正在学习CSS,并发现自己处于找到所有这些可爱的" CSS形状" (https://css-tricks.com/examples/ShapesOfCSS/)我只需要摆弄它们。尤其是" Pointer"一个(在底部)。
问题是,我想在彼此旁边有几个指针,没有任何余地。
当我这样做时:
<div class="pointer"></div>
<div class="pointer"></div>
<div class="pointer"></div>
<div class="pointer"></div>
//also changed css to give .pointer a `float: left;` property
由于pointer:after
的定义方式(左边是白色边框),所有指针在交叉点都会有这个丑陋的空白区域。所以我做的是:
<div class="pointer"></div>
<div class="pointer" style="z-index: -1;"></div>
<div class="pointer" style="z-index: -2;"></div>
<div class="pointer" style="z-index: -3;"></div>
是的,现在有效。但内联风格是这样的禁忌。所以它让我思考:有没有办法使用div为nth-of-type()作为变量来定义其z-index的信息?类似的东西:
div:nth-of-type(n) {
//use magic to specify that `z-index = -n;`
}