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

最新推荐文章于 2024-01-25 05:30:00 发布

原创最新推荐文章于 2024-01-25 05:30:00 发布 · 708 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#xhtml

HTML5+CSS3 专栏收录该内容

2 篇文章

订阅专栏

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>