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

下面是使用CSS绘制最常见形状的示例代码。由于CSS代码较多，我将仅展示关键部分。

/* 圆形 */
.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #333;
}
 
/* 矩形 */
.rectangle {
  width: 200px;
  height: 100px;
  background-color: #333;
}
 
/* 正方形 */
.square {
  width: 100px;
  height: 100px;
  background-color: #333;
}
 
/* 三角形 */
.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #333;
}
 
/* 平行四边形 */
.parallelogram {
  width: 150px;
  height: 100px;
  transform: skew(-20deg);
  background-color: #333;
}
 
/* 菱形 */
.diamond {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: #333;
}
.diamond:before {
  content: '';
  position: absolute;
  top: 0;
  left: 50px;
  width: 0;
  height: 0;
  border-bottom: 50px solid #333;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}
.diamond:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50px;
  width: 0;
  height: 0;
  border-top: 50px solid #333;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}
 
/* 五边形 */
.pentagon {
  position: relative;
  width: 100px;
  height: 75px;
  background-color: #333;
}
.pentagon:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: #333;
  transform: rotate(36deg) translate(25px, -50px);
}
 
/* 六边形 */
.hexagon {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: #333;
}
.hexagon:before {
  content: '';
  position: absolute;
  top: 0;
  left: 50px;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 43.3px solid #333;
}
.hexagon:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50px;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 43.3px solid #333;
}
 
/* 星形 */
.star {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: #333;
}
.star:before {
  content: '';
  position: absolute;
  top: 54px;
  left: 34px;
  width: 0;