问题描述:

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

125% misaligned borders

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;

}

}

网友答案:

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;
    }
}
相关阅读:
Top