当前位置: 动力学知识库 > 问答 > 编程问答 >

sass - 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

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;
    }
}
分享给朋友:
您可能感兴趣的文章:
随机阅读: