CSS3で斜線

はてなブログのテーマストアを眺めていたら、使用中のテーマ、Fresh Green のデザインが実使用時とスクリーンショットとで差異があることに気づいた。記事タイトルとサイドバーウィジェットの背景に斜線が入っていない。CSS を見るとストライプを表示する背景画像のリンクが 404 になっていた。

ストレス軽減のためにもテーマの編集は出来るだけ避けたいがリンク切れは流石に無視できない。だって気持ち悪いじゃん。

先日購入した例の事典によると、簡単なストライプくらいなら今やもう1行の CSS で表示できるそうな。便利な時代になりましたね。フリー素材屋は泣いていいと思うよ…

repeating-linear-gradient

.entry-title,
.hatena-module-title {
    background: repeating-linear-gradient(-45deg, #FFF, #FFF 5px, #F3F3F3 5px, #F3F3F3 10px);
    background: -webkit-repeating-linear-gradient(-45deg, #FFF, #FFF 5px, #F3F3F3 5px, #F3F3F3 10px); /* for iOS6 etc */
}