CSS 添加一个三角形答案

【问题标题】：CSS Adding a triangleCSS 添加一个三角形
【发布时间】：2012-11-23 21:45:36
【问题描述】：

我有一个标签，带有以下标记：

#leftMenu ul li a   {color: #111; text-decoration: none; display: block;}

我希望能够将鼠标悬停在它上面，并显示一个三角形末端。类似于这个形状：

http://www.promotionalpromo.com/Upfiles/Prod_v/1-7-8-x-2-7-8--Long-Arrow_2010017055476.jpg

但尺寸不同，更多的是： width: 200px; height: 20px;

要么我砍掉两端（右上边框和右下边框），要么用 :after 添加 css，但是当用户将鼠标悬停在标签上时，我需要这一切发生。

我怎样才能做到这一点？

【问题讨论】：

标签： css

【解决方案1】：

我发现这个网站非常有用： http://apps.eky.hk/css-triangle-generator/

当我需要创建三角形时。它为您生成一个三角形。

现在，在您生成三角形后，您需要做的就是在所需元素上使用 :before 或 :after 以使其工作，在您的情况下也可以悬停。

【讨论】：

但是你不能写'a:hover:after'可以吗？
你可以，看这里：stackoverflow.com/questions/5226764/…
本教程应该可以帮助你掌握它：speckyboy.com/2012/02/15/how-to-build-a-stylish-css3-search-box

【解决方案2】：

我是这样做的，仅供参考：

#leftMenu ul li a   {color: #111; text-decoration: none; display: block; position: relative;}
#leftMenu ul li a:hover {color: #555; text-decoration: underline; background: #EEE; }
#leftMenu ul li a:hover:after 
            {
                content:"";
                float:right;
                position:absolute; top:0; right:-12px; width:0; height:0;
                border-style: solid;
                border-width: 13px 0 12px 12px;
                border-color: transparent transparent transparent #EEE;
            }

【讨论】：