:before pseudo element overlaping edge of screen/browser
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:
<html>
<head>
<style>
</style>
</head>
<body>
<div class='board'>
<div class="hex"></div>
</div>
</body>
</html>
No comments:
Post a Comment