可通过html和css纯代码绘制圆形、椭圆、三角形、梯形、六边形等几何形状：圆形需正方形+border-radius:50%；椭圆为长宽不等矩形+50%圆角；三角形利用透明边框交汇；梯形用skew变形或clip-path；六边形用polygon()裁剪。
如果您希望在网页中不依赖图片或svg，仅通过HTML和CSS创建各种几何形状，则可以通过调整元素的宽高、边框、圆角、伪元素及变换等属性来实现。以下是几种常见形状的绘制方法：
一、绘制圆形
圆形可通过将一个正方形元素的border-radius设为50%来实现，确保宽高等值是关键前提。
1、创建一个
2、添加border-radius: 50%;使四角完全圆滑
立即学习“前端免费学习笔记（深入）”；
3、可选：设置background-color以直观显示形状，如background-color: #4A90E2;
二、绘制椭圆
椭圆是长宽不等但同样应用50%圆角的矩形，其纵横比决定扁平程度。
1、定义一个
2、应用border-radius: 50%;此时水平与垂直方向的弧度按比例自动适配
3、注意：不能使用px单位的border-radius（如border-radius: 40px），否则将退化为圆角矩形而非标准椭圆
三、绘制三角形
三角形利用CSS边框的交汇特性生成，通过隐藏三边、仅保留单边并设透明色，使该边的两个斜向边缘构成三角形轮廓。
1、创建一个无宽高的
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、创建一个正方形
2、添加样式clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
3、确保容器背景色可见，且无溢出内容；若需响应式，可用vmin单位替代px，如width: 10vmin; height: 10vmin;