CSS形状怎么绘制_CSS绘制各种形状方法汇总

星夢妙者

发布时间：2025-09-15 12:45:01

986人浏览过

来源于php中文网

原创

CSS绘制形状是通过盒模型、border-radius、transform、伪元素和clip-path等属性，将基础元素“雕刻”成目标形态。1. 矩形/正方形由width和height定义；2. 圆形/椭圆通过border-radius: 50%实现；3. 三角形利用透明边框与有色边框的视觉差；4. 心形结合旋转主元素与两个圆形伪元素拼合；5. 气泡框用矩形主体加三角形伪元素构成“小尾巴”；6. clip-path作为“裁剪大师”，以polygon、circle等函数实现复杂非矩形裁剪，提升图形自由度；7. 伪元素::before和::after扩展图形层次，在不增加DOM的情况下创建复合形状；8. 响应式设计需使用百分比、vw/vh、aspect-ratio、calc()及媒体查询，确保形状在不同屏幕下自适应缩放与变形。

css形状怎么绘制_css绘制各种形状方法汇总

CSS绘制形状，说白了，就是巧妙地利用HTML元素的盒模型（

width

height

border

）、圆角（

border-radius

）、定位（

position

）、变形（

transform

）以及伪元素（

::before

::after

）等属性。它不是像矢量软件那样直接画线，而是通过“拼积木”或者“裁剪”的方式，把一个矩形或方形的基础元素，改造成我们想要的各种形态。对我而言，这更像是一种数字雕塑，你需要理解每个属性的微妙作用，才能雕刻出理想的形状。

解决方案

绘制CSS形状，其实是个蛮有意思的挑战，它考验的是你对CSS基础属性的理解和组合能力。下面我列举一些常见的形状及其绘制方法，你会发现很多时候，我们都是在“无中生有”或者“借力打力”。

1. 矩形与正方形： 这是最基础的。一个

div

元素默认就是矩形。

/* 正方形 */
.square {
  width: 100px;
  height: 100px;
  background-color: #3498db;
}

/* 矩形 */
.rectangle {
  width: 150px;
  height: 80px;
  background-color: #2ecc71;
}

没什么特别的，就是设置

width

和

height

。

2. 圆形与椭圆形： 在正方形或矩形的基础上，加上

border-radius: 50%

就搞定了。

/* 圆形 */
.circle {
  width: 100px;
  height: 100px;
  background-color: #e74c3c;
  border-radius: 50%; /* 关键一步 */
}

/* 椭圆形 */
.oval {
  width: 150px;
  height: 80px;
  background-color: #f39c12;
  border-radius: 50%; /* 依然是50%，但因为宽高不同，所以是椭圆 */
}

3. 三角形： 这可能是CSS形状绘制里最经典的一个技巧了，利用

border

属性。一个宽度和高度都为0的元素，其边框会形成三角形。

/* 向上三角形 */
.triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent; /* 左边框透明 */
  border-right: 50px solid transparent; /* 右边框透明 */
  border-bottom: 100px solid #9b59b6; /* 底部边框有颜色，形成三角形 */
}

/* 向下三角形 (同理，改变有颜色的边框方向) */
.triangle-down {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid #1abc9c;
}

这个原理是，当一个元素的

width

和

height

都是0时，它的边框会以45度角斜向连接，如果其中三条边框是透明的，剩下那条有颜色的边框就会形成一个三角形。

立即学习“前端免费学习笔记（深入）”；

4. 心形： 心形通常需要组合多个元素，最常见的做法是利用一个正方形和两个伪元素（

::before

和

::after

）。

.heart {
  position: relative;
  width: 100px;
  height: 90px;
  background-color: #e74c3c;
  transform: rotate(-45deg); /* 旋转主元素 */
  border-radius: 10px; /* 轻微圆角 */
}

.heart::before,
.heart::after {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #e74c3c;
  border-radius: 50%; /* 伪元素是圆形 */
}

.heart::before {
  top: -50px; /* 向上移动 */
  left: 0;
}

.heart::after {
  left: 50px; /* 向右移动 */
  top: 0;
}

这个心形，说实话，每次画完都觉得挺有成就感的。它巧妙地利用了伪元素和旋转，将三个简单的形状组合成了复杂的图案。

5. 气泡框（Speech Bubble）： 一个矩形加上一个三角形伪元素，就能模拟对话气泡。

.speech-bubble {
  position: relative;
  width: 200px;
  padding: 15px;
  background-color: #f0f0f0;
  border-radius: 10px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}

.speech-bubble::after {
  content: "";
  position: absolute;
  bottom: -20px; /* 定位到气泡下方 */
  left: 30px; /* 调整位置 */
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 20px solid #f0f0f0; /* 颜色与气泡背景一致 */
}

气泡的“小尾巴”就是用我们前面讲过的三角形技巧实现的。

6. 使用

clip-path

绘制多边形：

clip-path

是一个现代CSS属性，它允许你用各种形状（如

polygon

circle

ellipse

inset

）来裁剪元素，这对于绘制复杂的、非矩形的形状非常强大，而且代码通常更简洁。

/* 六边形 */
.hexagon {
  width: 100px;
  height: 100px;
  background-color: #34495e;
  /* 使用polygon定义六边形的顶点 */
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

/* 星形 */
.star {
  width: 100px;
  height: 100px;
  background-color: #f1c40f;
  /* 定义一个五角星的顶点 */
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

clip-path

给我的感觉是，它把CSS的图形能力提升了一个维度。以前需要复杂的伪元素组合和旋转才能勉强实现的形状，现在一行

clip-path

就能搞定，虽然你需要手动计算或使用工具来生成顶点坐标。

CSS

clip-path

在图形绘制中扮演了什么角色？

clip-path

在CSS图形绘制中，扮演的角色我觉得用“裁剪大师”来形容最贴切不过了。它允许你将任何一个HTML元素，无论是图片、

div

还是文本块，按照你定义的任意形状进行裁剪，只显示形状内部的内容，外部则完全透明。这和传统的

overflow: hidden

那种矩形裁剪完全不同，

clip-path

能实现非常复杂的非矩形裁剪。

我个人觉得，

clip-path

的出现，极大地解放了前端开发者在图形创意上的束缚。过去，我们为了实现一个不规则的形状，可能需要设计师提供一张PNG图片（带透明背景），或者通过SVG来嵌入。现在，很多静态的、几何感强的形状可以直接用CSS来生成和维护。

它支持多种基本形状函数：

```
inset()
```
: 裁剪出一个矩形区域，可以有圆角。
```
circle()
```
: 裁剪出一个圆形。
```
ellipse()
```
: 裁剪出一个椭圆形。
```
polygon()
```
: 这是最强大的，通过一系列的坐标点来定义任意多边形。你可以想象成用钢笔工具在Photoshop里画路径。
```
path()
```
: （实验性）甚至可以直接使用SVG的
```
path
```
数据。

举个例子，如果我想让一个图片变成一个圆形，以前可能需要

border-radius: 50%

，但如果我希望它是一个不规则的圆（比如一个稍微压扁的椭圆，或者一个扇形），

clip-path

就能派上用场了。

.clipped-image {
  width: 200px;
  height: 200px;
  background-image: url('your-image.jpg');
  background-size: cover;
  /* 裁剪成一个椭圆 */
  clip-path: ellipse(50% 40% at 50% 50%);
  /* 裁剪成一个自定义的多边形 */
  /* clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%); */
}

当然，

clip-path

也有它的局限性，主要是浏览器兼容性问题（虽然现在主流浏览器支持度已经很不错了），以及复杂形状的坐标计算可能会比较繁琐。不过，有很多在线工具可以帮助我们生成

polygon

的坐标，这大大降低了使用门槛。对我来说，它不仅仅是一个属性，更是一种思考如何构建网页布局和图形的新方式。

如何利用伪元素（

::before

和

::after

）扩展CSS图形能力？

伪元素

::before

和

::after

在CSS图形绘制中，简直就是“分身术”一般的存在。它们允许你在不增加额外HTML标签的情况下，为现有元素添加两个“子元素”，这两个子元素可以拥有自己的样式、内容，甚至可以被独立定位和变形。我常常觉得，它们是CSS中最具魔力的特性之一，将原本单一的元素变得富有层次和复杂性。

Bolt.new

Bolt.new是一个免费的AI全栈开发工具

下载

它们的核心作用在于：

增加图形部件： 当一个简单的
```
div
```
无法满足复杂形状的需求时，
```
::before
```
和
```
::after
```
可以作为额外的“积木”来拼凑。比如前面提到的心形，就是通过一个主元素和两个伪元素圆球组合而成的。
创建视觉效果： 它们不仅能绘制形状，还能用来做一些装饰性的效果，比如箭头、小角标、进度条的填充等。
避免DOM污染： 最重要的一点是，它们不会在HTML结构中实际生成新的节点，这使得我们的HTML保持干净整洁，同时又能实现丰富的视觉效果。

使用伪元素的关键点在于：

必须设置
```
content: "";
```
，即使内容为空，这个属性也是必需的。
通常需要配合
```
position: absolute;
```
来进行精确的定位，相对于它们的父元素（如果父元素设置了
```
position: relative;
```
或
```
absolute
```
）。
它们可以拥有自己的
```
width
```
,
```
height
```
,
```
background-color
```
,
```
border-radius
```
,
```
transform
```
等所有CSS属性。

举个更深入的例子，我们来画一个稍微复杂一点的“标签”形状：

.tag {
  position: relative;
  width: 150px;
  height: 50px;
  background-color: #f1c40f;
  border-radius: 5px;
  line-height: 50px;
  text-align: center;
  color: white;
  font-weight: bold;
}

/* 左侧小三角 */
.tag::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -20px; /* 移到左侧外部 */
  transform: translateY(-50%); /* 垂直居中 */
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 20px solid #f1c40f; /* 与标签背景色一致 */
}

/* 右侧小缺口 */
.tag::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -10px; /* 移到右侧外部 */
  transform: translateY(-50%) rotate(45deg); /* 旋转形成缺口 */
  width: 20px;
  height: 20px;
  background-color: #f1c40f; /* 与标签背景色一致 */
  box-shadow: 2px 2px 5px rgba(0,0,0,0.2); /* 增加一点立体感 */
}

在这个例子里，

::before

创建了一个向左的三角形，模拟标签的“尾巴”；

::after

则通过旋转一个正方形，制造了一个看似缺口的效果。这种组合方式，让一个简单的

div

瞬间变得生动起来。所以，在我看来，掌握伪元素的使用，是提升CSS图形表现力的关键一环。

CSS形状绘制在响应式设计中需要注意什么？

在响应式设计中绘制CSS形状，我觉得最核心的理念就是“弹性”和“适应”。我们不能简单地用固定像素值来定义形状，那样在不同屏幕尺寸下会显得生硬甚至破裂。对我来说，这就像是给形状注入了生命力，让它们能够根据环境的变化而自我调整。

有几个关键点，我通常会特别留意：

使用相对单位： 这是响应式设计的基石。
- 百分比 (
  %
  )：形状的
```
width
```
  ,
```
height
```
  ,
```
border-radius
```
  ，以及定位属性（
```
top
```
  ,
```
left
```
  等）都应该尽量使用百分比。这样它们会相对于父元素进行缩放。例如，一个圆形如果
```
width: 20%; height: 20%;
```
  ，它在小屏幕上会更小，在大屏幕上会更大。
- 视口单位 (
  vw
  ,
  vh
  ,
  vmin
  ,
  vmax
  )：对于那些需要与整个视口大小关联的形状，
```
vw
```
  （视口宽度百分比）和
```
vh
```
  （视口高度百分比）非常有用。比如，你想要一个始终占据屏幕宽度一半的三角形，
```
border-left: 50vw solid transparent;
```
  就能实现。
- em
  和
  rem
  ：如果形状的大小需要与字体大小关联，
```
em
```
  或
```
rem
```
  是更好的选择。
```
aspect-ratio
```
属性： 这是一个比较新的、但非常实用的CSS属性。它能确保元素在缩放时始终保持固定的宽高比。
```
.responsive-square {
  width: 30vw; /* 宽度随视口变化 */
  aspect-ratio: 1 / 1; /* 保持正方形比例 */
  background-color: #27ae60;
}
```
有了
```
aspect-ratio
```
，我们就不必再依赖
```
padding-bottom
```
的黑科技来维持宽高比了，代码更清晰。
```
transform: scale()
```
和
calc()
：
- transform: scale()
  ：有时候，我们希望一个复杂形状整体缩放，而不是每个部件单独计算。这时，可以给包含形状的父元素使用
```
transform: scale()
```
  。
- calc()
  ：当需要混合使用不同单位时，
```
calc()
```
  能提供极大的灵活性。比如
```
width: calc(100% - 20px);
```
  。

媒体查询 (

@media

)：对于一些在不同断点下需要完全改变形态或位置的形状，媒体查询是不可或缺的。

.shape {
  width: 100px;
  height: 100px;
  background-color: blue;
  border-radius: 50%; /* 默认圆形 */
}

@media (max-width: 768px) {
  .shape {
    width: 50px; /* 小屏幕下变小 */
    height: 50px;
    background-color: red; /* 颜色也变了 */
    border-radius: 0; /* 变成方形 */
  }
}

这允许我们在特定屏幕尺寸下，完全重定义形状的样式。