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

最新推荐文章于 2023-04-09 12:24:06 发布

iteye_1484

最新推荐文章于 2023-04-09 12:24:06 发布

阅读量647

点赞数

分类专栏： HTML5+CSS3 文章标签： xhtml

本文链接：https://blog.csdn.net/iteye_1484/article/details/82208970

版权

HTML5+CSS3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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>

iteye_1484

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用CSS轻松绘制三角形、梯形

1、先画个对称点的三角形吧：&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"...
复制链接

扫一扫