h5中css利用div画简易多边形

最新推荐文章于 2025-05-24 18:00:29 发布

原创最新推荐文章于 2025-05-24 18:00:29 发布 · 置顶 · 5.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css

多边形画法专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用CSS边框属性绘制三角形和梯形，并提供两种不同的梯形绘制方法，包括适用于不同场景的具体实现技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>画图</title>
    <style type="text/css">
    .triangle {
        width: 0;
        height: 0;
        /*个人习惯设置宽高，设不设置不影响效果*/
        border: 100px solid transparent;
        /*设置边框的像素，类型，并设置颜色为transparent透明。此时从页面上时看不到任何东西的*/
        border-left-color: #acf;
        /*设置左边框的颜色，因为上面设置的全透明，此时只能见到设置了颜色的一边，便是一个三角形*/
    }
</style>
</head>
<body>
    <div class="triangle"></div>
</body>
</html>

效果如图

注：此方法中，border-left-color中的方向决定的三角形底的朝向。

梯形

方法1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>画图</title>
    <style type="text/css">
    .triangle {
        width: 0;
        height: 80px;
        border: 100px solid transparent;
        border-left-color: #acf;
    }
</style>
</head>
<body>
    <div class="triangle"></div>
</body>
</html>

是不是很眼熟，这和三角形的区别只有一个高的区别，但却能达到如图梯形效果。
这里写图片描述
但是这种方法需要注意几点

梯形的下底长度=边框像素+你所设置的高度或宽度（上底的长度）
当三角形的底是左右时，使其变为梯形是调整height。上下则调width。
此方法画出的梯形很笨拙，除了是想画个纯粹的梯形，一般不推荐使用此方法。

方法2
梯形由三个三角形组成，因为div是块级元素，所以要使其变为行级元素，这里我们要用到display: inline-block;
因为三个div的实质还是三个矩形，即使都变成了行级元素也不能贴合到一起，所以还要用到position：absolute绝对定位，定位方法w3c中有详细介绍。
这个方法较为繁琐，但是相较方法一更加灵活，能画出等腰梯形，直角梯形是一个三角形加一个矩形。

参照上面的方法，我们还可以利用其画出六边形。
（这些方法是本人所掌握的一些方法，若有错误或更简单的方法，还望大神指点）