小编Mik*_*tom的帖子

我想使用单个 div 创建一个六边形形状的 CSS 按钮，以保持标记干净。我一直在试验前后伪元素，可以用顶部和底部的六边形“点”来做，但我想用它们向左和向右指向以适应我主题的其余部分。我已经接近了，但我无法在我想要的地方获得 after 伪元素。任何人都可以解决这个问题吗？

这是我要做的：

#hex {
  background-color:green;
  width:100px;
  height:100px;
  float:left;
  display:block;
}

#hex::before {
  content:"";
  border-top:50px solid red;
  border-bottom:50px solid red;
  border-right:30px solid blue;
  float:left;
}

#hex::after {
  content:"";
  border-top:50px solid red;
  border-bottom:50px solid red;
  border-left:30px solid blue;
  float:left;
}

并且在http://jsfiddle.net/higginbottom/YKx2M/有一个 JS Fiddle