[分享]css中如生成多边形的模块

CSS中可以使用多边形模块来生成各种形状的图形，比如三角形、四边形、五边形、六边形等。

/* 生成三角形 */
.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

/* 生成正方形 */
.square {
  width: 100px;
  height: 100px;
  background-color: blue;
}

/* 生成五边形 */
.pentagon {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: yellow;
}
.pentagon:before {
  content: "";
  position: absolute;
  top: 0;
  right: -31px;
  width: 0px;
  height: 0px;
  border-top: 31px solid transparent;
  border-bottom: 31px solid transparent;
  border-left: 31px solid yellow;
}
.pentagon:after {
  content: "";
  position: absolute;
  top: 0;
  left: -31px;
  width: 0px;
  height: 0px;
  border-top: 31px solid transparent;
  border-bottom: 31px solid transparent;
  border-right: 31px solid yellow;
}

/* 生成六边形 */
.hexagon {
  width: 100px;
  height: 55px;
  background-color: green;
  position: relative;
}
.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}
.hexagon:before {
  bottom: 100%;
  border-bottom: 27.5px solid green;
}
.hexagon:after {
  top: 100%;
  width: 0;
  border-top: 27.5px solid green;
} 

使用多边形模块可以很方便地实现各种形状的图形，同时也可以使用transform等属性来进一步对图形进行变形和动画效果。