html - :before pseudo element overlaping edge of screen/browser

Question

The pseudo-element created with :before seems to overlap the edge of my screen. Fiddling with left doesn't fix it, and will overlap the edge of the container element if I place it within one and move that element.

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

Below some trivial html:

  <div class='board'>
    <div class="hex"></div>
  </div>

Answer 1

您需要偏移主要元素，您可以使用left: 30px;或margin-left:30px内部.hex

演示小提琴