• Skip to main content
  • Skip to primary sidebar

ChNK.log

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

2018年7月12日 最終更新日:2018年7月14日 カテゴリー: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で上書きするとキチンと途切れずに表示されました。

関連記事

  • Project Tab ManagerProject Tab Manager
  • Hexoでstyle.cssが更新されなかったHexoでstyle.cssが更新されなかった
  • お名前.comのドメイン登録時にWhois情報公開代行設定を忘れたお名前.comのドメイン登録時にWhois情報公開代行設定を忘れた
  • Jekyllでカテゴリ一覧ページを作りたいJekyllでカテゴリ一覧ページを作りたい
  • なんとも素敵なスマートクロックLaMetric Timeを衝動買いしたなんとも素敵なスマートクロックLaMetric Timeを衝動買いした
  • IntelliJ IDEA単品からAll Products Packにアップグレードしてみる #侍割IntelliJ IDEA単品からAll Products Packにアップグレードしてみる #侍割
  • git管理下の変更したファイルのみを抽出するワンライナーgit管理下の変更したファイルのみを抽出するワンライナー
  • ブログを再開してみようと思うブログを再開してみようと思う

共有:

  • Facebook
  • Twitter

カテゴリー:CSS




最初のサイドバー

プロフィール

茶木 健輔 / Kensuke Chanoki
Webデザイナー / フロントエンドエンジニア

1986年12月生まれ。鹿児島県出身。
福岡の会社のWeb担当から独立
現在は鹿児島で2児の父をしながら
在宅フリーランスをしています。

日々の生活で得た知見や、買った物、Webフロントエンドの事などを雑多に綴ります。
ガジェット好き。最近DTMも始めました。物欲が止まらない。

最近の投稿

  • Moonlander MARKⅠは持ち運びも出来る最強左右分離型キーボード
  • YAMAHAのネットワークレシーバーR-N803を購入した話
  • JetBrains ToolboxでインストールしたアプリがAlfredで表示されない時
  • IntelliJ IDEA単品からAll Products Packにアップグレードしてみる #侍割
  • Browser syncでネットワーク速度をエミュレーションする

カテゴリー

  • CSS
  • IntelliJ IDEA
  • iPhone
  • JavaScript
  • PHP
  • オーディオ
  • ガジェット
  • 備忘録
  • 雑記

アーカイブ

  • 2020年9月
  • 2019年8月
  • 2018年12月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年4月
  • 2018年1月
  • 2017年12月
  • 2017年11月
  • 2017年10月
  • 2015年10月
  • 2015年9月
  • 2015年4月
  • 2015年3月
  • 2015年2月
  • 2012年7月

COPYRIGHT © ChNK Design.