[分享]css六边形图表

CSS六边形图表是网页设计中常用的一种图形，表现出六边形的美感和立体感，能够很好地提升页面的视觉效果。使用CSS实现六边形图表，可以让页面更加美观，同时也提高了网页的可访问性。 .hexagon { ...

CSS六边形图表是网页设计中常用的一种图形，表现出六边形的美感和立体感，能够很好地提升页面的视觉效果。使用CSS实现六边形图表，可以让页面更加美观，同时也提高了网页的可访问性。

 .hexagon {
    position: relative;
    width: 200px;
    height: 115.47px;
    background-color: #64C7CC;
    margin: 57.74px 0;
  }
  .hexagon:before,
  .hexagon:after {
    content: "";
    position: absolute;
    width: 0;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
  }
  .hexagon:before {
    bottom: 100%;
    border-bottom: 57.74px solid #64c7cc;
  }
  .hexagon:after {
    top: 100%;
    width: 0;
    border-top: 57.74px solid #64c7cc;
  } 

上面这段代码是实现CSS六边形图表的核心代码。通过设置一个div元素的宽度、高度和背景颜色，创建一个六边形的基本形状。然后使用: before和: after伪元素来添加右上角和左下角的三角形，继而形成完整的六边形。通过调整三角形的大小和位置，可以得到各种不同大小和形状的六边形图表。

使用CSS创建六边形图表不仅可以简化代码，还能够达到更好的可访问性。因为六边形图表是由CSS代码生成的，所以即使在没有JavaScript支持的情况下，也能够正常显示。此外，CSS代码也非常轻量级，不会对网页的加载速度造成影响，这是其优点之一。所以，在网页设计中，我们推荐使用CSS来创建六边形图表，而不是使用图片或JavaScript。