CSSで作った「く」の字型矢印がスマホ実機で途切れるとき

2018年7月12日2021年7月17日

CSSでサクッと矢印を作ったとき、

スマホ実機で見たときに線と線の接点のところがなぜか途切れてしまう現象に出会いました。

具体的にはjQuery UIのDatepickerで矢印を独自のCSSで上書きしたところその現象。

.ui-datepicker-next {
    background: none;
    border: 6px solid #b61832;
    border-left: none;
    border-bottom: none;
    transform: rotate(45deg) translate(-5px, -5px);
    width: 1.75em;
    height: 1.75em;
    overflow: visible; // この行追加
}

overflow: hidden;が邪魔してたみたいで、visibleで上書きするとキチンと途切れずに表示されました。

よかったらシェアしてください！