[分享]css前端制作多边形

在前端页面制作中，多边形的应用更是广泛。比如我们经常在各种轮播图、广告横幅等地方看到含有各种各样多边形的图形。实现多边形制作可以借助 CSS 样式来实现，下面我们就来了解一下。 / 正方形 / .sq...

在前端页面制作中，多边形的应用更是广泛。比如我们经常在各种轮播图、广告横幅等地方看到含有各种各样多边形的图形。实现多边形制作可以借助 CSS 样式来实现，下面我们就来了解一下。

/* 正方形 */
.square {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid #f00;
}

/* 三角形 */
.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid #f00;
  
  transform: rotate(45deg);
  -ms-transform: rotate(45deg); 	
  -moz-transform: rotate(45deg); 	
  -webkit-transform: rotate(45deg); 	
  -o-transform: rotate(45deg);
}

/* 六边形 */
.hexagon {
  width: 60px;
  height: 104px;
  position: relative;
}

.hexagon:before,
.hexagon:after {
  content: "";
	width: 0;
	height: 0;
	position: absolute;
	top: -30px;
}

.hexagon:before {
  left: -30px;
  border-right: 30px solid transparent;
  border-bottom: 50px solid #f00;
  border-left: 30px solid transparent;
}

.hexagon:after {
  right: -30px;
  border-left: 30px solid transparent;
  border-top: 50px solid #f00;
  border-right: 30px solid transparent;
} 

通过上述代码，我们可以制作出三种多边形：正方形、三角形和六边形。 首先是正方形，我们可以利用 border 的特性来制作。将左右两侧同时设置相同的值，将下方设置一个颜色值，即可实现一个正方形多边形。 接下来是三角形，在上述正方形的基础上，通过 transform 属性旋转 45 度，即可得到一个三角形。 最后是六边形，同样也是借助 border，同时需要设置伪元素 before 和 after 分别表示六边形的上半部分和下半部分，并通过绝对定位来达到堆叠效果。