我想使用单个div创建一个六边形形状的CSS按钮,以保持标记干净。我一直在尝试使用before和after伪元素来实现,可以将六边形的“点”放在上下位置,但是我希望它们指向左右以适应我的主题。我已经接近成功了,但是无法将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;
}
并且这里有一个 JS Fiddle,链接地址为 http://jsfiddle.net/higginbottom/YKx2M/