MENU

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

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で上書きするとキチンと途切れずに表示されました。

よかったらシェアしてください!
もくじ
閉じる