CSS技巧:实现网页中的三角形

首　页　– 　网络编程　– 　数据库　–　网页设计工具　– 　网页脚本语言　– 　美术设计理论　–　服务器技术

当前位置：

首页> 网页脚本语言> CSS教程> CSS技巧:实现网页中的三角形

CSS技巧:实现网页中的三角形

三角形我们经常用在列表、下拉提示、面包屑导航的位置，给用户以导向的引导作用，比如，在有下拉列表的地方，我们可以用向下的箭头，在列表的时候，我们能告诉用户每个列表项和下一个列表项的关系，当在面包屑导航中，能让用户了解他现在所处的栏目或者频道。我们有哪些方法来实现它呢，下面我根据我们的实际工作中的经验作了简单的总结。
第一种方案，我们可以通过使用背景图片的方式来处理，这也是我们最经常用的方法。
1）单个切出三角形，我们可以根据UI设计的需求，切出与之相适应的图片，比如，我们能方便的根据需求，制作不同高度和颜色的三角形。在使用方面，HTML代码和CSS代码相对简单。如下面图是示例：
CSS技巧:实现网页中的三角形

这种直接使用背景图片的方法适合我们在三角形包含渐变、纹样、肌理等特殊效果的时候，我们可以设置它的颜色来保证图形边缘与背景色完美一致。缺点是我们需要为每个不同的方向需求制作一个图片，增加了http请求和CSS代码的数量。
由于这种方法比较简单,我们就不做演示了.
2）相比之前，我们怎么做到减少http请求，同时也标示出四个方向的三角形呢？我们可以制作一个菱形，通过使用CSS的背景定位来选择与之相匹配的形状。这样我们就能用一个图形，达到四个图形的目的。

<div style="width:100px;height:100px;position:relative;margin:34px;background:#6699FF"> 
    <em style="background:url(/image/2011119203327836.gif) no-repeat 0 0;width:67px;height:34px;display:block;position:absolute;top:-34px;left:15px"></em><em style="background:url(/image/2011119203327836.gif) no-repeat -35px 0;width:34px;height:67px;display:block;position:absolute;right:-34px;top:15px;"></em> 
    <em style="background:url(/image/2011119203327836.gif) no-repeat 0 -35px;width:67px;height:34px;display:block;position:absolute;bottom:-34px;left:15px;"></em> 
    <em style="background:url(/image/2011119203327836.gif) no-repeat 0 0;width:34px;height:67px;display:block;position:absolute;left:-34px;top:15px;"></em> 
</div>

3）方法二种的方法虽然我们可以实现调用一次背景图片标示四种三角状态的情况，但是在颜色方面确实单一的，我们只能由一种颜色，那我们需要增加三角形同样在激发鼠标悬浮伪类响应的时候，我们应该怎么做呢？比如鼠标悬浮的时候由红色变成橙色？那我们就可以使用这种方法，通过正负形的方法，方法二中的方法我们通过一个正形，那下面的例子我们使用一个负形

HTML文件

<div style="width:100px;height:100px;position:relative;margin:34px;background:#6699FF"> 
    <a class="n_a_1"></a> 
    <a class="n_a_2" ></a> 
    <a class="n_a_3" ></a> 
    <a class="n_a_4"></a> 
</div>

CSS文件

.n_a_1,.n_a_2,.n_a_3,.n_a_4{background-image:url(/image/2011119203327328.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}

这样子，我们就能很方便的改变背景颜色来获得不同的颜色的三角形了。
但是我们也发现了另一个问题，那就是当我们希望把这个三角形放到有颜色的背景时，构成其负形的区域颜色也会成为我们的限制，因为我们必须将构成负形的颜色与之相匹配。而且第二种方法和第三种方法中只能实现固定尺寸的正三角形，如果我们想随时改变它形状的话，不使用css3的背景大小属性background-size话（此属性已经已经被Opera\firefox\Safari\Chrome\IE 9），可能下面的方法更适合。

第二种方案，我们不是通过图形图片的方式,而是直接使用标签本身的css属性特点或者字符来进行创作.
1)我们可以使用border 属性来实现，border属性包括宽度、颜色、样式。我们可以改变它的颜色来适应。通过下图我能就能分析出,border属性相关特点:
CSS技巧:实现网页中的三角形

相关代码：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <style type="text/css"> 
    <!-- 
        #boder_arrow{border-width:20px;border-color:#ff6699 #ff3366 #cc0066 #990033;border-style:solid;width:0;height:0;line-height:0; } 
    --> 
    </style> 
    </head> 
<body> 
    <div id="boder_arrow"> </div> 
</body> 
</html>

我们可以改变border不同方向的颜色来找到我们需要的颜色，我们甚至可以通过border-width的修改,创造不同角度的三角形.

是不是上面的通过修改border-width后获得的上面的零件很有意思，可以让我们轻易的节省为创造三角型用掉的那个宝贵的 http请求。
巧思无难事，可能有时候你需要的并不是一个等腰的三角型，比如说我们常见到下面这种图形
CSS技巧:实现网页中的三角形
那个不是等腰三角形的图形，我们也能通过改变边框的宽度来得到：

<div style="border-color: transparent #FF6699 transparent transparent;border-style: solid;border-width: 0 30px 20px 0;height: 0;line-height: 0;width: 0;"></div>

2)通过旋转块状标签角度的方法获得,这种方法需要支持css3属性transform的浏览器支持.
我们经常需要这样的形式:
CSS技巧:实现网页中的三角形
那我们对这个图形进行分解

那我们先来实现上面分解的图形：

本文分页: 1 2

Tags：CSS技巧:实现网页中的三角形

上一篇文章：网页中加入CSS文件方法及介绍

下一篇文章：实例解析高效的Css模块化编写

阅读热门榜

最新更新