CSS添加三角形

我有一个标签，用下面的标记：CSS添加三角形

#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添加到：之后，但是当用户悬停标签时，我需要所有这些。

我该如何做到这一点？

来源

2012-11-23 Chud37

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

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

现在，当你生成三角形后，所有你需要做的就是使用:before或:after在你想要的元素上使它工作，在你的情况下也是这样。

来源

2012-11-23 13:21:36

但你不能写“：悬停：后”可以吗？ – Chud37

http://jsfiddle.net/pcjx4/ – Chud37

你可以看看这里：http://stackoverflow.com/questions/5226764/using-html-in-css-after-tag-for-hover-state –

仅供参考我这是怎么做的：

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

来源

2012-11-23 13:45:36 Chud37

CSS添加三角形

回答

相关问题