我正在使用:after
选择器在div上创建倾斜的边框。在放大到125%或175%之前,它看起来还不错,这时在成角度的部分中缺少像素。根据我的阅读,这是由于浏览器无法准确舍入像素宽度引起的。
知道如何将它们与CSS / SCSS对齐吗?谢谢
100%看起来不错
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;
}
}
最佳答案
这是我的解决方案,诀窍是将它们分开并使它们重叠。玩得开心 :)
.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;
}
}
关于css - 缩放时CSS倾斜的边框额外像素,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/38960213/