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


the pseudo-element created :before seems overlap edge of screen. fiddling left doesn't fix it, , overlap edge of container element if place within 1 , move 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 trivial html:

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

you need offset main element, can either use left: 30px; or margin-left:30px inside .hex

demo fiddle


Comments

Popular posts from this blog

Detect support for Shoutcast ICY MP3 without navigator.userAgent in Firefox? -

web - SVG not rendering properly in Firefox -

java - JavaFX 2 slider labelFormatter not being used -