While coding two arrows on MacOSX, I noticed that they do not display correctly on Windows systems. Could this be due to the resolution or a coding error?
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;
}
The first arrow is displayed on Mac and the second one is on Windows, both using the latest version of Chrome.