CSS3:CSSだけでチェックマークを作る

goto_jp 2,089views 更新:2014年10月29日

サンプルはこちら。

See the Pen HfzuE by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

SCSS後半の下記の部分でチェックマークを表現してます。
長方形の擬似要素をつくり、上ボーダー左ボーダーを削ることでチェックマーク状にしています。

a.selected {
    position: relative;
    padding-right: 30px;
    &:after {
        position: absolute;
        display: block;
        content: "";
        width: 5px;
        height: 10px;
        top: 48%;
        right: 15px;
        border: solid 3px #ccc;
        border-left: 0;
        border-top: 0;
        @include transform(translateY(-50%) rotate(45deg));
    }
}

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません