三角形列表项目符号 | CSS-Tricks

Endy

# 2011 年 8 月 18 日

技巧非常令人印象深刻，…
但我非常佩服这些评论。假设 Blogspot 平台可以像这样…

Doug T

# 2011 年 8 月 18 日

现在……如何让它们在菜单/列表项展开时向下旋转？最好不要使用 jQuery……仅使用 CSS。

Janos Janecki

评论永久链接# 2011 年 8 月 18 日

我看到一个例子，您正在谈论，在这里 http://www.artlebedev.ru/tools/technogrette/html/treeview/
Janos Janecki

评论永久链接# 2011 年 8 月 18 日
在您的情况下，您可以尝试隐藏相关的 ul 内容，并在悬停时显示它（使用 css），并使用以下方法旋转三角形

li:hover:before { border-width: 0.45em 0.35em 0 0.35em ; }

也许过渡也会有帮助，我不知道。

Sean Erdrich

# 2011 年 12 月 6 日

以下是我快速进行的一些调整……我尝试了一些方法，但找不到一种有效的方式来为悬停开始和结束时的转换设置动画。我想，如果您使用 javascript，您就可以做这样的事情，但这段代码是纯 css。


<ul>
     <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
          <div>This is visible when the &lt;li&gt; is hovered over.</div>
     </li>
     <li>Aliquam tincidunt mauris eu risus.</li>
     <li>Vestibulum auctor dapibus neque.</li>
</ul>

与之搭配


ul {
    margin: 0.75em 0;
    padding: 0 1em;
    list-style: none;}
	

li:before { 
    content: "";
    border-color: transparent #111;
    border-style: solid;
    border-width: 0.35em 0 0.35em 0.45em;
    display: block;
    height: 0;
    width: 0;
    left: -1em;
    top: 0.9em;
    position: relative;
	-webkit-transition:all 0.15s linear;
	-moz-transition:all 0.15s linear;
	-o-transition:all 0.15s linear;
	transition:all 0.15s linear;}


ul li div{
	height:0px;	/*	You could use negative positioning too	*/
	opacity:0;
	transition:all .3s ease-in-out;
	-webkit-transition:all .3s ease-in-out;
	-moz-transition:all .3s ease-in-out;
	-o-transition:all .3s ease-in-out;
	transition:all .3s ease-in-out;}
	
	
ul li:hover div{
	height:20px;
	opacity:1;}
	
	
ul li:hover:before{
	-webkit-transform:rotate(90deg);
	-moz-transform:rotate(90deg);
	-o-transform:rotate(90deg);
	transform:rotate(90deg);}

Javi Sola

# 2011 年 10 月 3 日

很棒的技巧。但是，IE 7 不会显示三角形项目符号，有没有什么变通方法（黑客）来解决这个问题？

Rick Lecoat

评论永久链接# 2011 年 11 月 27 日

Javi：IE7 不支持 :before 和 :after 伪元素。

我本来想建议使用 Selectivizr 脚本，它将许多 CSS3 选择器功能添加到 IE 6-8，但它也不支持这些伪元素。显然，这是因为 :before 和 :after 会导致 DOM 发生变化，这可能会导致 Selectivizr 的其他一些功能失败。

因此，除非其他人有巧妙的变通方法，否则您唯一的选择可能是通过条件注释为 IE7 提供单独的规则，也许可以使用背景图像作为列表标记。

Sean Erdrich

# 2011 年 12 月 6 日

以下是一种有效的方法（尽管有点长）

CSS


ul {
    margin: 0.75em 0;
    padding: 0 1em;
    list-style: none;}
	
	
ul li span.bullet{
	content: "";
    border-color: transparent #111;
    border-style: solid;
    border-width: 0.35em 0 0.35em 0.45em;
    display: inline-block;
    height: 0;
    width: 0;/*
    left: -1em;
    top: 0.9em;*/
    position: relative;
	left:-5px;}


ul li div{
	height:0px;	/*	You could use negative positioning too	*/
	opacity:0;
	margin-left:8px;
	transition:all .3s ease-in-out;
	-webkit-transition:all .3s ease-in-out;
	-moz-transition:all .3s ease-in-out;
	-o-transition:all .3s ease-in-out;
	transition:all .3s ease-in-out;}
	
	
ul li:hover div{
	height:20px;
	opacity:1;}
	
	
ul li.dropdown:hover span.bullet {
	-webkit-transform:rotate(90deg);
	-moz-transform:rotate(90deg);
	-o-transform:rotate(90deg);
	transform:rotate(90deg);}

HTML



<ul>
         <li class="dropdown">
            <span class="bullet"></span>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                  <div>This is visible when the &lt;li&gt; is hovered over.
</div>


            </li>
                  <li><span class="bullet">
                        </span>Aliquam tincidunt mauris eu risus.</li>




            </li>
                  <li><span class="bullet">
                        </span>Aliquam tincidunt mauris eu risus.</li></ul>

Josh W

# 2013 年 1 月 25 日

在 Firefox（18.0.1）中，这会在三角形周围留下难看的深灰色轮廓/抗锯齿。当您使用彩色项目符号（而不是此示例中的黑色）时，这更加明显。在 Chrome 中，它看起来很好。

我找到了一个解决方案，那就是对边框背景颜色使用 RGBA 值，RGB 更接近背景颜色。透明度“不是真正的透明”涉及对角线和抗锯齿的地方。
已修复（在白色背景上）：border-color: rgba(255,255,255,0) #e45900;

Wil T

# 2013 年 3 月 19 日

这是一个非常有用的教程。我感兴趣的是只在我的下拉菜单实际上存在的地方显示三角形。我不知道如何在没有子列表的列表项上隐藏它们。不过我已经弄清楚如何隐藏子列表本身上的三角形。下面粘贴了额外的代码

sidebar ul li ul li:before{
border: none;
}

Wil T

评论永久链接# 2013 年 3 月 20 日

我找到了解决方法。只需要创建一个新类来隐藏箭头。

ul li.no_carrot:before{
border-width: 0;
}

Vanessa

# 2014 年 12 月 30 日

抱歉在一个非常旧的帖子中插话，但我认为既然我发现了这篇文章，其他人也可能发现它，并且可能认为我的解决方案很有用。

li:before { content: "\25B6 \ "; /* ISO 10646 字符 */ }
您可以使用不同的 ASCII 代码来实现您想要的结果。就这样。

St.G

评论永久链接# 2015 年 2 月 4 日

这正是我希望验证的内容。感谢您的代码片段！
Greg

评论永久链接# 2015 年 7 月 27 日

这完美地解决了问题，正是我一直在寻找的。谢谢！

Ashok

# 2015 年 6 月 19 日

不错。

L David

# 2015 年 7 月 17 日

这种类型的解决方案会破坏 UL 的 start 属性，我认为除了使用背景图像之外，没有理想的纯 CSS 方法来解决这个问题。

NextLocal

# 2015 年 11 月 26 日

我创建了一个 JSBin 演示，其中包含您在此处发布的内容：http://jsbin.com/xusipig/1/edit?css,output

sabry

# 2016 年 11 月 23 日

有帮助，谢谢 ^_^

Dev

# 2020 年 2 月 10 日

谢谢，但不知何故，当我使用这个技巧时，行高增加了几乎一倍，与普通项目符号相比……我无法降低它……您可以在这里看到与编号列表的比较：https://www.plarecon.com/implants-biomaterials-plastic-surgery/

Geoff Graham

评论永久链接# 2020 年 2 月 10 日

看起来您能够减小尺寸！至少当我检查时是这样的。我想该元素从级联中的其他地方继承了一个较大的行高，这意味着需要在此规则集中明确定义它。

评论

发表评论 取消回复

发表评论取消回复