HTML如何绘制不同形状【CSS教程】

本文详解如何仅用HTML和CSS纯代码绘制圆形、椭圆、三角形、梯形和六边形等常见几何形状——无需图片或SVG，通过巧妙运用border-radius、透明边框交汇、transform变形及clip-path polygon裁剪等核心技巧，就能灵活创建高兼容、易维护的矢量级图形，特别适合追求轻量、响应式与语义化开发的前端实践者快速上手并拓展创意表达。

如果您希望在网页中不依赖图片或SVG，仅通过HTML和CSS创建各种几何形状，则可以通过调整元素的宽高、边框、圆角、伪元素及变换等属性来实现。以下是几种常见形状的绘制方法：

一、绘制圆形

圆形可通过将一个正方形元素的border-radius设为50%来实现，确保宽高等值是关键前提。

1、创建一个标签，并设置固定宽度和高度，例如width: 100px; height: 100px;

2、添加border-radius: 50%;使四角完全圆滑

3、可选：设置background-color以直观显示形状，如background-color: #4A90E2;

二、绘制椭圆

椭圆是长宽不等但同样应用50%圆角的矩形，其纵横比决定扁平程度。

1、定义一个，设置width: 160px; height: 80px;

2、应用border-radius: 50%;此时水平与垂直方向的弧度按比例自动适配

3、注意：不能使用px单位的border-radius（如border-radius: 40px），否则将退化为圆角矩形而非标准椭圆

三、绘制三角形

三角形利用CSS边框的交汇特性生成，通过隐藏三边、仅保留单边并设透明色，使该边的两个斜向边缘构成三角形轮廓。

1、创建一个无宽高的，设置height: 0; width: 0;

2、设置四边border，其中三边为transparent，一边为实色，如border-left: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 40px solid #FF6B6B;

3、根据所需朝向调整对应边的border方向与颜色，例如上三角需设border-top，左三角需设border-left

四、绘制梯形

梯形可通过transform: skewX()或skewY()对矩形进行倾斜变形，或使用clip-path精确裁切四边坐标。

1、先创建一个常规矩形，如width: 120px; height: 60px; background-color: #4ECDC4;

2、添加transform: skewX(-20deg);实现横向拉伸变形

3、为保持布局稳定，可在外层容器中用相反角度补偿，如父容器设transform: skewX(20deg)

五、绘制六边形

六边形可借助clip-path配合polygon()函数，通过六个顶点坐标精确裁剪出正六边形轮廓。

1、创建一个正方形，建议宽高均为120px

2、添加样式clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

3、确保容器背景色可见，且无溢出内容；若需响应式，可用vmin单位替代px，如width: 10vmin; height: 10vmin;

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《HTML如何绘制不同形状【CSS教程】》文章吧，也可关注golang学习网公众号了解相关技术文章。