运用CSS轻松绘制三角形、梯形
日期：2014-05-17 浏览次数：20853 次
使用CSS轻松绘制三角形、梯形
?
?
?
1、先画个对称点的三角形吧：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用CSS轻松绘制三角形、梯形</title>
<style type="text/css">
.graph:before{
content:"";
display:block;
width:0;
height:0;
border-width:0 9px 10px 9px;
border-style:none solid solid;
border-color:transparent transparent red;
}
</style>
</head>
<body>
<div class="graph"></div>
</body>
</html>
?以上代码实现绘制一个等腰三角形
：
（图形小了点哈，下面换大图）
当然：IE不定支持，你懂得……
试着画个任意的三角形
,只用修改border-width属性值就可以了，来个例子先：
<style type="text/css">
.graph:before{
content: "";
display: block;
height: 0;
width: 0px;
border-width: 0px 30px 45px 145px;
border-style: none solid solid;
border-color: transparent transparent red;
}
</style>
?图形如图所示：
?
再来个直角三角形
：
<style type="text/css">
.graph:before{
content: "";
display: block;
height: 0;
width: 0px;
border-width: 0px 0px 45px 145px;
border-style: none solid solid;
border-color: transparent transparent red;
}
</style>
??
2、画个任意梯形试试：
?
修改下CSS，来个梯形的（其他形状自己试试看吧）：
<style type="text/css">
.graph:before{
content: "";
display: block;
height: 0;
width: 30px;
border-width: 0px 15px 40px 65px;
border-style: none solid solid;
border-color: transparent transparent red;
}
</style>
??
?
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
