：在伪元素重叠屏幕/浏览器边缘之前

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