で作成した疑似要素が:before
画面の端に重なっているようです。いじってleft
も修正されず、コンテナ要素を1つに配置してその要素を移動すると、コンテナ要素の端に重なってしまいます。
.hex:before {
content: " ";
position: absolute;
height: 0px;
width: 0px;
float: left;
border-right: 30px solid #6C6;
border-top: 52px solid transparent;
border-bottom: 52px solid transparent;
left: -30px;
}
.hex {
position: relative;
float: left;
width: 60px;
height: 104px;
background-color: #6C6;
}
.hex:after {
content: " ";
position: absolute;
float: left;
border-left: 30px solid #6C6;
border-top: 52px solid transparent;
border-bottom: 52px solid transparent;
right: -30px;
}
いくつかの簡単なhtmlの下:
<div class='board'>
<div class="hex"></div>
</div>