cssの疑似要素にborderを使ってうまく三角ができなかったのでメモ。
高さを指定していないことが原因かな?
index.html
<div class="arrow-wrap">
<span class="arrow"></span>
</div>
style.css
/*-- iosだとうまく表示されない --*/
.arrow:before {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 4px solid transparent;
border-top: 6px solid #fff;
border-bottom: none;
transition: .5s;
}
/*-- これだとうまく表示された --*/
.arrow:before {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
border: 4px solid transparent;
border-top: 6px solid #fff;
border-bottom: none;
transition: .5s;
}
検証がIOS11.4だったので、もしかしたら他のバージョンでも同じような現象が起きるかも。