如何为 :active 行创建一个带有三角形的 <ul>？答案

【问题标题】：How to create a <ul> with a triangle for the :active row?如何为 :active 行创建一个带有三角形的 <ul>？
【发布时间】：2013-06-27 06:38:55
【问题描述】：

我知道我的头衔不是最好的，但我尽了最大努力。解释我的问题对我来说有点困难，但我想要的是创建一个在活动元素中具有“三角形”的水平列表。我在下面显示一张图片。

这可能与 CSS 吗？我知道我会如何使用 jQuery，但我现在想使用 CSS 而不是 jQuery/Javascript。

我实际上创建了一个小提琴，您可以在下面找到一个链接：
http://jsfiddle.net/jackbillstrom/3dNcj/

我尝试了一个 javacript 解决方案，但对它不满意，因为我想改用 CSS。我的目标是让您在示例中看到的那个三角形可以“缓解”您单击的<li>。这是可能的还是我在做梦？

【问题讨论】：

该示例似乎没有JS实现。这是故意的吗？
@Asad 是的，因为我想用纯 CSS 试一试
您可以尝试使用小图片作为背景的复古技术。有关 CSS3 实现，请参阅 stackoverflow.com/a/7073558/1009061。
如果我不想要那种“轻松”的效果就完美了：/
@Jack 你能详细说明你为什么不想使用 JS 吗？

标签： html css css-animations

【解决方案1】：

只需将其添加到 CSS 的底部即可：

ul#objects li {
    overflow: hidden;
    position: relative;
}
ul#objects li.active:after, ul#objects li:hover:after {
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    background: #fff;
    box-shadow: 0 0 3px #666;
    transform: rotate(-45deg);
    top:5px;
    right: -8px;
}

JSFiddle Demo。没有 jQuery，你甚至可以免费获得悬停效果。

更新 1：这里我使用了:target，这样箭头只会在您单击元素时显示：JSFiddle Demo。

更新 2：知道了。只有 CSS 的解决方案，其中箭头会随着您点击的方向滑动：JSFiddle Demo。

更新 3：在此处进行了更新，以便在您悬停和单击时箭头滑动。希望您可以在代码中看到点击效果需要:target 代码以及在您的HTML 中添加链接，但如果您只想使用:hover 效果然后切换到不同的页面，您不需要我添加到您的 HTML 的链接，您只需将 .active 类添加到我有 :target 的 CSS 中。希望这是有道理的。 JSFiddle Demo。

【讨论】：

:target 的精彩回答 +1。
您也可以使用单选按钮代替:target 以防止干扰页面上的其他片段标识符。
这很棒，唯一缺少的是“缓动”效果。不过对我来说没问题！ :)
@Jack 它确实有缓动效果，或者至少在我的浏览器中是这样。您具体在寻找什么？
为什么你使用-webkit-transform而不包括标准transform

【解决方案2】：

这是使用伪元素实现此目的的一种方法。这使用纯 CSS，但依赖于 CSS 3：

#objects > li:hover:after{
    content: ' ';
    border-color: transparent #fff transparent transparent;
    border-style: solid;
    border-width: 13px;
    position: absolute;
    right: 0px;
    top: 10px;
}
#objects > li:hover{
    position:relative;
}

这是一个演示：http://jsfiddle.net/wFege/

我一直在绞尽脑汁，但不幸的是，我想不出任何方法来让这在 badZoke 的答案中融入“滑动”效果。您愿意详细说明为什么不能使用 JS 吗？如果问题只是不想包含 jQuery，您可以使用原生 JS 完成同样的事情。

【讨论】：

【解决方案3】：

这是你想要的吗？

创建三角形的一些基本 CSS，

.triangle{
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent; 

    border-right:10px solid white; 
    position: absolute;
    right: -1px;
    top: 10px;
}

一个简单的js使用.animate()来移动指针，

$("li").click(function(){
    $this = $(this);
    $(".triangle").animate({
        top: $this.position().top + "px"
    });
});

Test Link

更新

在支持它的浏览器上使用 CSS3 过渡，需要一点 JS 重新插入元素以重新启动动画。

Brentonsrine 有更好的 Pure CSS3 解决方案。

Test Link

【讨论】：

这正是我想要的，但是，没有办法只用 CSS 吗？
让我试试，给我一些时间 :) 顺便说一句，低级浏览器不支持 CSS(3)。
看来我们赢了！我发现这很有希望，我认为其他人也会觉得这很有用：D 干杯！
这根本不是纯 CSS3。您仍在使用 JS 来滑动东西。也就是说，我认为 JS 是这里唯一的方法。
更新了我的答案以修正歧义。

【解决方案4】：

Asad的纯CSS解决方案真的很不错。我做了一个类似的事情，它制作了一个水平列表（你提到过）。

http://jsfiddle.net/teAPW/

ul, li {
    list-style:none;
    margin:0;
    padding:0;
}
li {
    display:inline-block;
    width:100px;
    height:100px;
    border:1px solid #AAA;
    border-left:none;
    text-align:center;
    line-height:100px;
    background:#DDD;
    color:#999;
    position:relative;
}
ul > li:first-child { border-left:1px solid #AAA; }
ul > li.active { border-right:none; }
ul > li.active + li { margin-left:10px; border-left:1px solid #AAA }
ul > li.active:after {
    position:absolute;
    top:40px;
    right:0;
    border:13px solid;
    border-color:transparent #FFF transparent transparent;
    content:"";
}

【讨论】：