实现网页中的三角形.doc

CSS技巧:实现网页中的三角形三角形我们经常用在列表、下拉提示、面包屑导航的位置，给用户以导向的引导作用，比如，在有下拉列表的地方，我们可以用向下的箭头，在列表的时候，我们能告诉用户每个列表项和下一个列表项的关系，当在面包屑导航中，能让用户了解他现在所处的栏目或者频道。我们有哪些方法来实现它呢，下面我根据我们的实际工作中的经验作了简单的总结。 第一种方案，我们可以通过使用背景图片的方式来处理，这也是我们最经常用的方法。1） 单个切出三角形，我们可以根据UI设计的需求，切出与之相适应的图片，比如 ，我们能方便的根据需求，制作不同高度和颜色的三角形。在使用方面，HTML代码和CSS代码相对简单。如下面图是示例：这种直接使用背景图片的方法适合我们在三角形包含渐变、纹样、肌理等特殊效果的时候，我们可以设置它的颜色来保证图形边缘与背景色完美一致。缺点是我们需要为每个不同的方向需求制作一个图片，增加了http请求和CSS代码的数量。 由于这种方法比较简单,我们就不做演示了.2） 相比之前，我们怎么做到减少http请求，同时也标示出四个方向的三角形呢？我们可以制作一个菱形 ，通过使用CSS的背景定位来选择与之相匹配的形状。这样我们就能用一个图形，达到四个图形的目的。 3）方法二种的方法虽然我们可以实现调用一次背景图片标示四种三角状态的情况，但是在颜色方面确实单一的，我们只能由一种颜色，那我们需要增加三角形同样在激发鼠标悬浮伪类响应的时候，我们应该怎么做呢？比如鼠标悬浮的时候由红色变成橙色？那我们就可以使用这种方法，通过正负形的方法，方法二中的方法我们通过一个正形，那下面的例子我们使用一个负形 HTML文件123456 CSS文件123456789 .n_a_1,.n_a_2,.n_a_3,.n_a_4background-image:url(/image/2011119203327328.gif);background-repeat:no-repeat;position:absolute;display:block; a.n_a_1background-color:#0033CC;background-position:0 0;width:67px;height:34px;top:-34px;left:15px a.n_a_1:hoverbackground-color:#db0085 a.n_a_2background-color:#0066CC;background-position:-33px 0;width:34px;height:67px;right:-34px;top:15px; a.n_a_2:hoverbackground-color:#db0085 a.n_a_3background-color:#00CCCC;background-position:0 -33px;width:67px;height:34px;bottom:-34px;left:15px; a.n_a_3:hoverbackground-color:#db0085 a.n_a_4background-color:#00FFCC;background-position:0 0;width:34px;height:67px;left:-34px;top:15px; a.n_a_4:hoverbackground-color:#db0085 这样子，我们就能很方便的改变背景颜色来获得不同的颜色的三角形了。但是我们也发现了另一个问题，那就是当我们希望把这个三角形放到有颜色的背景时，构成其负形的区域颜色也会成为我们的限制，因为我们必须将构成负形的颜色与之相匹配。而且第二种方法和第三种方法中只能实现固定尺寸的正三角形，如果我们想随时改变它形状的话，不使用css3的背景大小属性background-size话（此属性已经已经被OperafirefoxSafariChromeIE 9），可能下面的方法更适合。第二种方案，我们不是通过图形图片的方式,而是直接使用标签本身的css属性特点或者字符来进行创作.1) 我们可以使用border 属性来实现，border属性包括宽度、颜色、样式。我们可以改变它的颜色来适应。通过下图我能就能分析出,border属性相关特点: 我们可以改变border不同方向的颜色来找到我们需要的颜色，我们甚至可以通过border-width的修改,创造不同角度的三角形.是不是上面的通过修改border-width后获得的上面的零件很有意思，可以让我们轻易的节省为创造三角型用掉的那个宝贵的 http请求。巧思无难事，可能有时候你需要的并不是一个等腰的三角型，比如说我们常见到下面这种图形那个不是等腰三角形的图形，我们也能通过改变边框的宽度来得到： 2)通过旋转块状标签角度的方法获得,这种方法需要支持css3属性transform的浏览器支持.我们经常需要这样的形式:3)通过字符实现.实现方法与上面的类似,将字符的颜色设置为和希望表现得容器相同的颜色,从而得到一个视觉上的三角形.只是这次我们没有用到CSS3的transform属性，兼容性更好一些。 符号三角 !- .wrap_charwidth:150px; height:150px; text-align:center; margin:100px; background:#ccc; position:relative; .a_char,.b_char,.c_char,.d_charfont-size:50px; text-align:center; color:#ccc; position:absolute; z-index:10;line-height:0;line-height:50px; .a_charleft:-4px;bottom:-25px; .b_charleft:-25px; top:-4px; .c_chartop:-25px;right:-4px; .d_charright:-25px; bottom:-5px; 案例研究：1）线形的三角形，如下图：这种图形的实现我们经常依赖于图形实现，其实我们可以通过border属性，将两个三角型的叠加就可以获得相应的效果： 三角形叠加 这样我们就能获得更漂亮的回复窗口： 标示导航状态 #nav_stateheight:20px; #nav_state awidth:80px;display:block;text-align:center;padding:2px;line-height:18px;float:left;background-color:#ccc;margin-right:5px;color:#333;position:relative;text-decoration:none;font-size:12px; #nav_state a spandisplay:none; #nav_state a.current,#nav_state a:hoverbackground-color:#000;color:#fff; #nav_state a.current span,#nav_state a:hover spandisplay:block;width:0;height:0;border-width:8px;border-style:solid;border-color:#000 transparent transparent;position:absolute;top:20px;left:32px;overflow:hidden; 标签一 标签二 标签三 标签四 上面我们实现的是固定宽度，那如果是自适应宽度的、箭头朝上的呢？ 导航箭头朝上标示符 #menu_liquidheight:30px;margin:20px; list-style:none;font-size:12px; #menu_liquid liheight:30px;line-height:30px;float:left;white-space:nowrap; #menu_liquid li adisplay:block;float:left;height:30px;position:relative;padding:0 12px;background:#777;color:#fff; text-decoration:none;border-right:1px solid #ccc; #menu_liquid li a spandisplay:none; #menu_liquid li a.current,#menu_liquid li a:hover background:#000;color:#0099FF; #menu_liquid li a.current span,#menu_liquid li a:hover spandisplay:block;width:0;height:0;border-style:solid;border-color: transparent transparent #f0f0f0 transparent;border-width:0 8px 8px;position:absolute;bottom:0;left:50%;margin-left:-4px;overflow:hidden;z-index:0; #menu