[分享]css六芒星怎么画

六芒星是一种常见的图形，它在宗教、文化和艺术中都有着广泛的应用。在网页设计中，你可以使用CSS来绘制一个六芒星。下面是如何用CSS画一个六芒星：.hexagon { : relative; widt...

六芒星是一种常见的图形，它在宗教、文化和艺术中都有着广泛的应用。在网页设计中，你可以使用CSS来绘制一个六芒星。下面是如何用CSS画一个六芒星：

.hexagon {
  position: relative; 
  width: 190px; 
  height: 110px; 
  background-color: #6fbced;
  margin: 20px auto;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  top: -50px;
  left: 0;
  width: 0;
  border-right: 95px solid transparent;
  border-left: 95px solid transparent;
  border-bottom: 50px solid #6fbced;
}

.hexagon:after {
  top: 110px;
  border-bottom: 50px solid #6fbced;
}

.hexagon p {
  position: absolute;
  top: 0;
  left: 0;
  height: 110px;
  width: 190px;
  line-height: 110px;
  text-align: center;
  font-size: 36px;
  font-family: Arial, sans-serif;
  color: #fff;
  text-shadow: 1px 1px #000;
} 

这段CSS代码中，我们主要是用了一个伪元素before和after来画出六芒星的两个三角形部分，其余的就是对六芒星进行定位和样式设置了。像这样，你可以使用CSS来设计各种各样的形状和图案，让你的网页设计更加丰富多样。