olo olo -4 years ago 182
CSS Question

css3 arrow on different system

I made two arrows, coded on MacOSX, I accidentally found the arrows don't look good on windows. Is that because of the resolution or the code is incorrect?

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;
}


First one is on mac, 2nd one is on Windows, both on Chrome latest version

enter image description here

enter image description here

Answer Source

It's off by a pixel for some reason. Changing the position to -> top: -12px; and adding a font-weight: bold; property seems to fix it.

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

https://jsfiddle.net/oqfes3sk/

Perhaps you could add separate code for both Mac and PC after detecting the user agent:

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

and then:

.mac .arrow:before {

  ...
  top: -13px;

}

.pc .arrow:before {

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

}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download