使用CSS轻松绘制三角形、梯形

xiaohun912

浏览: 12152 次
性别:
来自: 南京

最近访客更多访客>>

wd1282988143

zhangly2011

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML5+CSS3

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>