CSS 插图初学者指南 - 第 1 部分 第 1 部分 - 基础知识

2025-06-10

CSS 插图初学者指南 - 第 1 部分

第 1 部分 - 基础知识

第 1 部分 - 基础知识

用 CSS 创建插图其实很有趣。如果你访问 CodePen 或其他类似的网站，你会发现用 CSS 可以创作出多么令人惊叹的设计和艺术作品。我来举个例子。

作者：小出俊也

很酷，不是吗？你还可以添加一些动画，让它更生动。相信我，一旦你开始创作自己的插画，你就会爱上它。它还能帮助你提升 CSS 技能，尤其是在伪元素、阴影、定位和边框半径方面。现在，让我们看看如何创作自己的插画。

在本文中，我将向您展示如何创建最基本的形状。为了创建形状，我们使用div::before以及伪元素::after。

正方形

正方形是用 CSS 绘制的最简单的形状。只需添加一个高度和相等的宽度，然后添加一个background-color，你的正方形就完成了。

<div class="square"></div>
Enter fullscreen mode Exit fullscreen mode 
.square {
  background-color: dodgerblue;
  height: 200px;
  width: 200px;
}
Enter fullscreen mode Exit fullscreen mode

替代文本

长方形

将正方形的一边拉长，得到一个长方形。

<div class="rectangle">div>
Enter fullscreen mode Exit fullscreen mode 
.rectangle {
  background-color: dodgerblue;
  height: 125px;
  width: 200px;
}
Enter fullscreen mode Exit fullscreen mode

替代文本

圆圈

创建一个正方形，并在所有边上添加50% border-radius以将其变成一个漂亮的圆形。

<div class="circle"></div>
Enter fullscreen mode Exit fullscreen mode 
.circle {
  background-color: dodgerblue;
  height: 200px;
  width: 200px;
  border-radius: 50%;
}
Enter fullscreen mode Exit fullscreen mode

替代文本

椭圆

按照绘制圆形的相同步骤，但在矩形上。

<div class="ellipse"></div>
Enter fullscreen mode Exit fullscreen mode 
.ellipse {
  background-color: dodgerblue;
  height: 125px;
  width: 200px;
  border-radius: 50%;
}
Enter fullscreen mode Exit fullscreen mode

替代文本

丸

这种形状很常见，尤其是按钮。你可以称之为药丸或胶囊形状。创建这种形状的技巧是添加一个更大的border-radius四边形。

<div class="pill"></div>
Enter fullscreen mode Exit fullscreen mode 
.pill {
  background-color: dodgerblue;
  height: 100px;
  width: 200px;
  border-radius: 50000px; /*Any large value will do the trick*/
}
Enter fullscreen mode Exit fullscreen mode

替代文本

蛋

要创建此形状，您需要对水平和垂直半径使用不同的值。

<div class="egg"></div>
Enter fullscreen mode Exit fullscreen mode 
.egg {
  height: 200px;
  width: 150px;
  background-color: dodgerblue;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
Enter fullscreen mode Exit fullscreen mode

替代文本

三角形

三角形与其他形状略有不同，因为我们绘制它们时会添加边框。请看下面的代码，高度和宽度均设置为零。您可能不太容易理解它是如何形成的。调整代码，看看更改这些值时会发生什么。尝试将高度和宽度设置为非零值。更改边框宽度。观察变化，您就会明白它的工作原理。

<div class="triangle"></div>
Enter fullscreen mode Exit fullscreen mode 
.triangle {
  height: 0px;
  width: 0px;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 173px solid dodgerblue;
}
Enter fullscreen mode Exit fullscreen mode

替代文本

Chris Coyier的这支笔将帮助您轻松理解：

梯形

梯形与三角形完全相同，只是其宽度不为零。

<div class="trapezium"></div>
Enter fullscreen mode Exit fullscreen mode 
.trapezium {
  height: 0px;
  width: 150px;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 150px solid dodgerblue;
}
Enter fullscreen mode Exit fullscreen mode

替代文本

平行四边形

我们利用该transform: skew()属性来创建平行四边形。您也可以使用相同的方法，使用相等的高和宽来创建菱形。

<div class="parallelogram"></div>
Enter fullscreen mode Exit fullscreen mode 
.parallelogram {
  height: 125px;
  width: 200px;
  background-color: dodgerblue;
  transform: skew(-20deg);
}
Enter fullscreen mode Exit fullscreen mode

替代文本

制作 CSS 艺术作品其实就是以各种有趣的方式组合这些形状。在下一篇文章中，我将向你展示如何使用之前提到的伪元素来简化复杂的插图，并保持 HTML 代码的简洁。话虽如此，我希望你学到了一些新的东西，并激励你创作出一些精彩绝伦的作品。

编码愉快！😎

您可以在我的codepen 🚀上找到更多形状的代码片段，例如心形、星形、无限形、六边形、八边形等

鏂囩珷鏉ユ簮锛�https://dev.to/snkds/the-beginner-s-guide-to-css-illustrations-bcg
Devto 翻译
PREV
2019 年 9 月 9 项最佳开源发现
NEXT
最好的计算机科学书籍