：在屏幕/瀏覽器的僞元素重疊邊緣之前

Question

使用:before創建的僞元素似乎與我的屏幕邊緣重疊。擺弄left不會修復它，並且如果將它放在一個元素中並移動該元素，它將與容器元素的邊緣重疊。

.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> 

Answer 1

您需要抵消的主要元素，您可以使用left: 30px;或margin-left:30px內.hex

Demo fiddle