.hexagon-column:before {
  content:'';
  position:absolute;
  height:100px;
  width:100%;
  left:0;
  bottom:100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' fill='#000' width='100%25' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100 L50 0 L100 100 Z' /%3E%3C/svg%3E");
}
.hexagon-column:after {
  content:'';
  position:absolute;
  height:100px;
  width:100%;
  left:0;
  top:100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' fill='#000' width='100%25' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L50 100 L100 0 Z' /%3E%3C/svg%3E");
}