スマホサイトコーディングの覚え書き（右側アイコンとborderに背景画像を指定する飾り枠）

デモ：http://jsdo.it/Ituki/sJPv

borderに背景画像を指定する飾り枠

ジェネレーター

レティナっぽい感じにする

BはAの２分の１を指定する

    border: Apx solid;
    -webkit-border-image: 背景画像 B repeat;
    border-image: 背景画像 B fill repeat;

※デモ2番目

右側アイコン

background-position: right XXpx XX

スマホ未対応。PCはIE9以上。
※デモ3番目

background-position: calc(100%-XXpx) XX

Android4.3以下やiPhone5.1以下が未対応
http://caniuse.com/#search=calc

background-position: right XX + background-origin: content-box;

display: blockの時に有効
※デモ4番目

display: inline-blockにしたいとき

afterの背景画像でbackground-sizeを指定する。
※デモ5番目