日期:2014-05-17  浏览次数:20572 次

使用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>
?


?

?