可通过HTML和CSS纯代码绘制圆形、椭圆、三角形、梯形、六边形等几何形状：圆形需正方形+border-radius:50%；椭圆为长宽不等矩形+50%圆角；三角形利用透明边框交汇；梯形用skew变形或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边框的交汇特性生成，通过隐藏三边、仅保留单边并设透明色，使该边的两个斜向边缘构成三角形轮廓。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

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;