css3不同系统上的箭头

Question

我制作了两个箭头，在MacOSX上编码，我不小心发现箭头在窗户上看起来不太好看。那是因为分辨率还是代码不正确？

https://jsfiddle.net/m7ynysdp/

<div class="arrow a1"></div>
<div class="arrow a2"></div>

.arrow {
    height: 0;
    border-bottom: 2px solid;
    border-width: 2px;
    position: relative;
    color: #000;
}

.a1 {
    position: absolute;
    top: 51%;
    left: 76%;
    transform: translate(-51%, -76%);
    width: 22vw;
    transform: rotate(-156deg);
    transform-origin: 0;
    border-bottom: 2px solid;
}

.a2 {
    position: absolute;
    top: 53%;
    left: 65%;
    transform: translate(-53%, -65%);
    width: 6.5vw;
    transform: rotate(-111deg);
    transform-origin: 0;
    border-bottom: 2px solid;
    cursor: pointer;
    transition: color .3s;
}

.arrow::before {
    position: absolute;
    top: -13px;
    right: -3px;
    content: '>';
    display: block;
    font-size: 1.4rem;
}

第一个在Mac上，第二个在Windows上，两个都在Chrome最新版本

Answer 1

出于某种原因它被像素关闭了。将位置更改为 - > top: -12px;并添加font-weight: bold;属性似乎可以修复它。

.arrow::before {
    position: absolute;
    top: -12px;
    right: -3px;
    content: '>';
    display: block;
    font-size: 1.4rem;
    font-weight: bold;
}

https://jsfiddle.net/oqfes3sk/

也许您可以在检测到用户代理后为Mac和PC添加单独的代码：

jQuery(document).ready(function(){
 if(navigator.userAgent.indexOf('Mac') > 0){
  jQuery('body').addClass('mac');
 } else {
  jQuery("body").addClass("pc");
 }
});

然后：

.mac .arrow:before {

  ...
  top: -13px;

}

.pc .arrow:before {

  ...
  top: -12px;
  font-weight: bold;

}