Edited at

IOS11.4で疑似要素を使って三角を作る時の注意点

More than 1 year has passed since last update.

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だったので、もしかしたら他のバージョンでも同じような現象が起きるかも。