css,画三角形用纯css画个三角形以下是源代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"> <html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>"> <head> <title>用纯css画个三角形</title> </head> <body> <style type="text/css"> .rightdirection { width:0;height:0; line-height:0; border-width:20px; border-style:solid; border-color:transparent transparent transparent #A9DBF6; } .bottomdirection { width:0;height:0; line-height:0; border-width:20px; border-style:solid; border-color: #A9DBF6 transparent transparent transparent; } .leftdirection { width:0;height:0; line-height:0; border-width:20px; border-style:solid; border-color: transparent #A9DBF6 transparent transparent; } .topdirection { width:0;height:0; line-height:0; border-width:20px; border-style:solid; border-color: transparent transparent #A9DBF6 transparent; } </style> <div class="rightdirection"></div> <p> <div class="bottomdirection"></div> <p> <div class="leftdirection"></div> <p> <div class="topdirection"></div> </body> </html>
画个小三角形
<style> #jb51_a{ border-top:10px solid #FFFFCC; border-left:10px solid #FF3300; border-bottom:10px solid #FFFFCC;} </style> <div id="jb51_a"></div>
以下代码兼容IE6：
<style>b.sanjiao{
display:inline-block;
width: 0;
height: 0;
border-width: 10px 10px;
border-style: dashed dashed solid dashed;
border-color: transparent transparent #ff0000;
font-size: 0;
line-height: 0;
-moz-transition: -moz-transform .2s ease-in;
-o-transition: -o-transform .2s ease-in;
transition: transform .2s ease-in;
vertical-align:text-top;
margin-left:5px
}</style>
<b class="sanjiao"></b>
css,画三角形
|
