Barryman9000 Barryman9000 - 3 months ago 13
CSS Question

CSS angled border extra pixel when zoomed

I'm using the

:after
selector to create an angled border on a div. It looks fine until you zoom in to 125% or 175%, at which point there's an missing pixel in the angled portion. From what I've read this is caused by browsers not being able to round the pixel width accurately.

Any idea how I can get these to line up with just CSS/SCSS? Thanks

100% looks good

Image zoom 100%

125% misaligned borders

Image zoom 125%

https://jsfiddle.net/barryman9000/qqywvynx/

<div class="flag">Tester</div>

.flag {
font-size: 12px;
color: #fff;
font-weight: normal;
background-color: #ff8a00;
line-height: 20px;
position: relative;
text-align: center;
margin-bottom: 15px;
display: inline-block;
padding-left: 8px;
margin-right: 20px;

&:after {
content: '';
position: absolute;
height: 0;
width: 0;
border-style: solid;
border-width: 10px 10px 10px 0;
padding-right: 4px;
border-color: #ff8a00 transparent #ff8a00 #ff8a00;
}
}

Answer

here my solution the trick is to split them up and let them overlap. have fun :)

.flag {
    font-size: 12px;
    color: #fff;
    font-weight: normal;
    background-color: #ff8a00;
    line-height: 20px;
    position: relative;
    text-align: center;
    margin-bottom: 15px;
    display: inline-block;
    padding: 0 8px;
    margin-right: 20px;    
    position: relative;
    &:before {
        content: '';
        position: absolute;
        height: 0;
        width: 0;
        right: -13px;
        bottom: 0;
        border-style: solid;
        border-width: 0 10px 11px 0;
        padding-right: 5px;
        border-color: #ff8a00 transparent #ff8a00 #ff8a00;
    }
    &:after {
        content: '';
        position: absolute;
        height: 0;
        width: 0;
        right: -13px;
        border-style: solid;
        border-width: 11px 10px 0 0;
        padding-right: 5px;
        border-color: #ff8a00 transparent #ff8a00 #ff8a00;
    }
}