Question

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

#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;

要么我切两端，（边框 - 右上角和边框 - 右下角），或者我添加css：之后，但是当用户将鼠标悬停在标签上时，我需要完成所有这些操作。

我怎样才能做到这一点？

Answer 1

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

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

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

Answer 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;
            }

CSS添加三角形

2 个答案: