用CSS绘制最常见的40种形状和图形

以下是使用CSS绘制的40种最常见形状和图形的一部分示例代码。这些示例涵盖了矩形、圆形、三角形、平行四边形和不规则四边形等基本形状，以及一些复杂的图形如心形和椭圆。

/* 矩形 */
.rectangle {
  width: 100px;
  height: 50px;
  background-color: blue;
}
 
/* 圆形 */
.circle {
  width: 50px;
  height: 50px;
  background-color: red;
  border-radius: 50%;
}
 
/* 三角形 */
.triangle {
  width: 0;
  height: 0;
  background-color: transparent;
  border-style: solid;
  border-width: 50px 100px 50px 0;
  border-color: transparent transparent transparent green;
}
 
/* 平行四边形 */
.parallelogram {
  width: 100px;
  height: 50px;
  background-color: purple;
  transform: skew(-20deg);
  transform-origin: left;
}
 
/* 心形 */
.heart {
  width: 100px;
  height: 100px;
  background-color: pink;
  position: relative;
}
.heart::before,
.heart::after {
  content: "";
  width: 50px;
  height: 80px;
  background: pink;
  border-radius: 50px 50px 0 0;
  position: absolute;
  top: 0;
  left: 50px;
}
.heart::before {
  transform: rotate(-45deg);
}
.heart::after {
  transform: rotate(45deg);
}
 
/* 椭圆 */
.ellipse {
  width: 100px;
  height: 50px;
  background-color: yellow;
  border-radius: 50%;
}
 
/* 不规则四边形 */
.irregular-quadrilateral {
  width: 100px;
  height: 50px;
  background-color: orange;
  transform: rotate(45deg);
}

这些CSS样式可以直接应用于HTML元素，以生成各种形状。例如，你可以创建一个简单的HTML文件，并将类应用于div元素：

<div class="rectangle"></div>
<div class="circle"></div>
<div class="triangle"></div>
<div class="parallelogram"></div>
<div class="heart"></div>
<div class="ellipse"></div>
<div class="irregular-quadrilateral"></div>

这些代码示例展示了如何使用CSS创建基本的形状和复杂图形，并且可以根据需要进行扩展和修改。