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

<div>

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绘制形状，说白了，就是巧妙地利用HTML元素的盒模型（<div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;">

width

<div>div>div><div>div>div><div>div>div><div>div>div><div>div>div>, <div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;">

height

border

<div>div>div><div>div>div>）、圆角（<div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;">

border-radius

<div>div>div><div>div>div><div>div>div>）、定位（<div style="position:relative; padding:0px; margin:0px;">

position

<div>div>div>）、变形（<div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;">

transform

<div>div>div><div>div>div>）以及伪元素（<div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;">

::before

<div>div>div><div>div>div><div>div>div><div>div>div><div>div>div><div>div>div>, <div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;">

::after

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

解决方案

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

1. 矩形与正方形： 这是最基础的。一个<div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;">

div

<div>div>div><div>div>div><div>div>div><div>div>div>元素默认就是矩形。

<div style="position:relative; padding:0px; margin:0px;">

/* 正方形 */ .square {   width: 100px;   height: 100px;   background-color: #3498db; }  /* 矩形 */ .rectangle {   width: 150px;   height: 80px;   background-color: #2ecc71; }

<div>div>div>

没什么特别的，就是设置<div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;">

width

<div>div>div><div>div>div><div>div>div><div>div>div><div>div>div>和<div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;">

height

<div>div>div><div>div>div><div>div>div><div>div>div><div>div>div>。

2. 圆形与椭圆形： 在正方形或矩形的基础上，加上<div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;">

border-radius: 50%

<div>div>div><div>div>div>就搞定了。

<div style="position:relative; padding:0px; margin:0px;">

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

<div>div>div>

3. 三角形： 这可能是CSS形状绘制里最经典的一个技巧了，利用<div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;">

border

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

<div style="position:relative; padding:0px; margin:0px;">

/* 向上三角形 */ .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; }

<div>div>div>

这个原理是，当一个元素的<div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;">

width

height

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

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

4. 心形： 心形通常需要组合多个元素，最常见的做法是利用一个正方形和两个伪元素（<div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;">

::before

<div>div>div><div>div>div><div>div>div><div>div>div><div>div>div><div>div>div>和<div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;">

::after

<div>div>div><div>div>div><div>div>div><div>div>div><div>div>div><div>div>div>）。

<div style="position:relative; padding:0px; margin:0px;">

.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; }

<div>div>div>

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

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

<div style="position:relative; padding:0px; margin:0px;">

.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; /* 颜色与气泡背景一致 */ }

<div>div>div>

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

6. 使用 <div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;">

clip-path

<div>div>div><div>div>div><div>div>div><div>div>div><div>div>div><div>div>div><div>div>div><div>div>div><div>div>div><div>div>div><div>div>div> 绘制多边形：<div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;">

clip-path

<div>div>div><div>div>div><div>div>div><div>div>div><div>div>div><div>div>div><div>div>div><div>div>div><div>div>div><div>div>div><div>div>div>是一个现代CSS属性，它允许你用各种形状（如<div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;">

polygon

<div>div>div><div>div>div>, <div style="position:relative; padding:0px; margin:0px;">

circle

<div>div>div>, <div style="position:relative; padding:0px; margin:0px;">

ellipse

<div>div>div>, <div style="position:relative; padding:0px; margin:0px;">

inset

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

<div style="position:relative; padding:0px; margin:0px;">

/* 六边形 */ .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%); }

<div>div>div>

<div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;">

clip-path

<div>div>div><div>div>div><div>div>div><div>div>div><div>div>div><div>div>div><div>div>div><div>div>div><div>div>div><div>div>div><div>div>div>给我的感觉是，它把CSS的图形能力提升了一个维度。以前需要复杂的伪元素组合和旋转才能勉强实现的形状，现在一行<div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;">

clip-path

CSS <div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;">

clip-path

clip-path

div

<div>div>div><div>div>div><div>div>div><div>div>div>还是文本块，按照你定义的任意形状进行裁剪，只显示形状内部的内容，外部则完全透明。这和传统的<div style="position:relative; padding:0px; margin:0px;">

overflow: hidden

<div>div>div>那种矩形裁剪完全不同，<div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;">

clip-path

我个人觉得，<div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;">

clip-path

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

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

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

举个例子，如果我想让一个图片变成一个圆形，以前可能需要<div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;">

border-radius: 50%

<div>div>div><div>div>div>，但如果我希望它是一个不规则的圆（比如一个稍微压扁的椭圆，或者一个扇形），<div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;">

clip-path

<div style="position:relative; padding:0px; margin:0px;">

.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%); */ }

<div>div>div>

当然，<div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;">

clip-path

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

polygon

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

如何利用伪元素（<div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;">

::before

::after

<div>div>div><div>div>div><div>div>div><div>div>div><div>div>div><div>div>div>）扩展CSS图形能力？

伪元素 <div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;">

::before

<div>div>div><div>div>div><div>div>div><div>div>div><div>div>div><div>div>div> 和 <div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;">

::after

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

它们的核心作用在于：

<div> %E5%8F%AF%E7%81%B5ai"> CSS形状怎么绘制_CSS绘制各种形状方法汇总 <div> %E5%8F%AF%E7%81%B5ai">可灵AI

可灵AI：新一代AI创意生产力平台

<div> CSS形状怎么绘制_CSS绘制各种形状方法汇总 11061 div> div> %E5%8F%AF%E7%81%B5ai"> 查看详情 div>

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

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

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

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

<div style="position:relative; padding:0px; margin:0px;">

.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); /* 增加一点立体感 */ }

<div>div>div>

在这个例子里，<div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;">

::before

<div>div>div><div>div>div><div>div>div><div>div>div><div>div>div><div>div>div> 创建了一个向左的三角形，模拟标签的“尾巴”；<div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;">

::after

<div>div>div><div>div>div><div>div>div><div>div>div><div>div>div><div>div>div> 则通过旋转一个正方形，制造了一个看似缺口的效果。这种组合方式，让一个简单的<div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;">

div

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

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

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

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

使用相对单位： 这是响应式设计的基石。
- 百分比 (<div style="position:relative; padding:0px; margin:0px;">
  %
  
  <div>div>div>)： 形状的 <div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;">
```
width
```
  <div>div>div><div>div>div><div>div>div><div>div>div><div>div>div>, <div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;">
```
height
```
  <div>div>div><div>div>div><div>div>div><div>div>div><div>div>div>, <div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;">
```
border-radius
```
  <div>div>div><div>div>div><div>div>div>，以及定位属性（<div style="position:relative; padding:0px; margin:0px;">
```
top
```
  <div>div>div>, <div style="position:relative; padding:0px; margin:0px;">
```
left
```
  <div>div>div>等）都应该尽量使用百分比。这样它们会相对于父元素进行缩放。例如，一个圆形如果 <div style="position:relative; padding:0px; margin:0px;">
```
width: 20%; height: 20%;
```
  <div>div>div>，它在小屏幕上会更小，在大屏幕上会更大。
- 视口单位 (<div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;">
  vw
  
  <div>div>div><div>div>div>, <div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;">
  
  vh
  
  <div>div>div><div>div>div>, <div style="position:relative; padding:0px; margin:0px;">
  
  vmin
  
  <div>div>div>, <div style="position:relative; padding:0px; margin:0px;">
  
  vmax
  
  <div>div>div>)： 对于那些需要与整个视口大小关联的形状，<div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;">
```
vw
```
  <div>div>div><div>div>div>（视口宽度百分比）和<div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;">
```
vh
```
  <div>div>div><div>div>div>（视口高度百分比）非常有用。比如，你想要一个始终占据屏幕宽度一半的三角形，<div style="position:relative; padding:0px; margin:0px;">
```
border-left: 50vw solid transparent;
```
  <div>div>div> 就能实现。
- <div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;">
  em
  
  <div>div>div><div>div>div> 和 <div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;">
  
  rem
  
  <div>div>div><div>div>div>： 如果形状的大小需要与字体大小关联，<div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;">
```
em
```
  <div>div>div><div>div>div>或<div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;">
```
rem
```
  <div>div>div><div>div>div>是更好的选择。
<div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;">

aspect-ratio

<div>div>div><div>div>div> 属性： 这是一个比较新的、但非常实用的CSS属性。它能确保元素在缩放时始终保持固定的宽高比。

<div style="position:relative; padding:0px; margin:0px;">
```
.responsive-square {   width: 30vw; /* 宽度随视口变化 */   aspect-ratio: 1 / 1; /* 保持正方形比例 */   background-color: #27ae60; }
```
<div>div>div>

有了 <div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;">
```
aspect-ratio
```
<div>div>div><div>div>div>，我们就不必再依赖 <div style="position:relative; padding:0px; margin:0px;">
```
padding-bottom
```
<div>div>div> 的黑科技来维持宽高比了，代码更清晰。
<div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;">

transform: scale()

<div>div>div><div>div>div><div>div>div> 和 <div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;">

calc()

<div>div>div><div>div>div><div>div>div>：
- <div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;">
  transform: scale()
  
  <div>div>div><div>div>div><div>div>div>： 有时候，我们希望一个复杂形状整体缩放，而不是每个部件单独计算。这时，可以给包含形状的父元素使用 <div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;">
```
transform: scale()
```
  <div>div>div><div>div>div><div>div>div>。
- <div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;">
  calc()
  
  <div>div>div><div>div>div><div>div>div>： 当需要混合使用不同单位时，<div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;">
```
calc()
```
  <div>div>div><div>div>div><div>div>div> 能提供极大的灵活性。比如 <div style="position:relative; padding:0px; margin:0px;">
```
width: calc(100% - 20px);
```
  <div>div>div>。

媒体查询 (<div style="position:relative; padding:0px; margin:0px;">

@media

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

<div style="position:relative; padding:0px; margin:0px;">

.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; /* 变成方形 */   } }

<div>div>div>

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

<div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;"><div style="position:relative; padding:0px; margin:0px;">

clip-path

<div>div>div><div>div>div><div>div>div><div>div>div><div>div>div><div>div>div><div>div>div><div>div>div><div>div>div><div>div>div><div>div>div> 的响应式考量：当使用 <div style="position:relative; padding:0px; margin:0px;">
```
clip-path: polygon()
```
<div>div>div> 时，其坐标也应该尽量使用百分比，而不是固定像素值，这样多边形才能随着元素的尺寸变化而等比例缩放。

总的来说，响应式设计中的CSS形状绘制，更多的是一种“动态思维”。我们不是画一个死板的形状，而是设计一个能够适应各种环境的“活”形状。这需要我们跳出固定像素的思维定式，拥抱相对单位和现代CSS特性。

<div style="display: inline-flex;"> 相关标签： <div style="display:flex;"> css教程 css html 前端 go svg 浏览器工具前端开发响应式设计 html元素垂直居中网页布局 css html dom position overflow padding border 伪元素 background transform photoshop div> div> <div>

大家都在看：

<div> CSS形状怎么绘制_CSS绘制各种形状方法汇总 CSS边框样式怎么做_CSS实现各种边框样式效果 CSS性能如何优化_CSS性能优化技巧汇总 CSS滤镜怎么使用_CSS滤镜效果应用指南 CSS单位有哪些区别_CSS常用单位区别与使用场景 div> div> div> css教程 css html 前端 go svg 浏览器工具前端开发响应式设计 html元素垂直居中网页布局 css html dom position overflow padding border 伪元素 background transform photoshop

发表于：web前端

2025-09-15

# go

复制链接

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

解决方案

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

大家都在看：

Python json 模块的序列化边界

css flex 子元素内容过多撑破布局怎么办_限制宽度并允许换行

C++怎么播放声音 C++ PlaySound函数播放WAV音频教程【多媒体】

css 想通过 hover 改变背景颜色怎么办_background-color 与 hover 伪类

如何使用 Foundation Equalizer 实现卡片内按钮底部对齐

Composer怎么获取当前版本信息_Composer版本检测与环境查看【基础】

Laravel怎么获取路由参数_Laravel在控制器接收ID变量方法【基础】

动态访问 Laravel Blade 模板中的对象属性

Knex 中使用 orWhereLike 实现多字段模糊匹配查询

MySQL INFORMATION_SCHEMA.TABLES data_free 判断碎片