三角形我们经常用在列表、下拉提示、面包屑导航的位置,给用户以导向的引导作用,比如,在有下拉列表的地方,我们可以用向下的箭头,在列表的时候,我们能告诉用户每个列表项和下一个列表项的关系,当在面包屑导航中,能让用户了解他现在所处的栏目或者频道。我们有哪些方法来实现它呢,下面我根据我们的实际工作中的经验作了简单的总结。 第一种方案,我们可以通过使用背景图片的方式来处理,这也是我们最经常用的方法。
3)方法二种的方法虽然我们可以实现调用一次背景图片标示四种三角状态的情况,但是在颜色方面确实单一的,我们只能由一种颜色,那我们需要增加三角形同样在激发鼠标悬浮伪类响应的时候,我们应该怎么做呢?比如鼠标悬浮的时候由红色变成橙色?那我们就可以使用这种方法,通过正负形的方法,方法二中的方法我们通过一个正形,那下面的例子我们使用一个负形 HTML文件
CSS文件 .n_a_1,.n_a_2,.n_a_3,.n_a_4{background-image:url(http:///wp-content/uploads/2011/01/negative_4.gif);background-repeat:no-repeat;position:absolute;display:block;} a.n_a_1{background-color:#0033CC;background-position:0 0;width:67px;height:34px;top:-34px;left:15px} a.n_a_1:hover{background-color:#db0085} a.n_a_2{background-color:#0066CC;background-position:-33px 0;width:34px;height:67px;right:-34px;top:15px;} a.n_a_2:hover{background-color:#db0085} a.n_a_3{background-color:#00CCCC;background-position:0 -33px;width:67px;height:34px;bottom:-34px;left:15px;} a.n_a_3:hover{background-color:#db0085} a.n_a_4{background-color:#00FFCC;background-position:0 0;width:34px;height:67px;left:-34px;top:15px;} a.n_a_4:hover{background-color:#db0085} 这样子,我们就能很方便的改变背景颜色来获得不同的颜色的三角形了。 第二种方案,我们不是通过图形图片的方式,而是直接使用标签本身的css属性特点或者字符来进行创作. 相关代码:
我们可以改变border不同方向的颜色来找到我们需要的颜色,我们甚至可以通过border-width的修改,创造不同角度的三角形. 是不是上面的通过修改border-width后获得的上面的零件很有意思,可以让我们轻易的节省为创造三角型用掉的那个宝贵的 http请求。 那个不是等腰三角形的图形,我们也能通过改变边框的宽度来得到: 2)通过旋转块状标签角度的方法获得,这种方法需要支持css3属性transform的浏览器支持. 那我们对这个图形进行分解 那我们先来实现上面分解的图形: 当我们将旋转后的正方形的背景色色值设置为相交盒形相同的色值时,他们就融为一体了. 3)通过◆字符实现.实现方法与上面的类似,将字符的颜色设置为和希望表现得容器相同的颜色,从而得到一个视觉上的三角形.只是这次我们没有用到CSS3的transform属性,兼容性更好一些。 |
|
来自: qianghuiyong > 《CSS》