HOME

ABOUT

ARCHIVES

CONTACT

css3

CSS3:CSSのみで斜線背景を実装する

いままでは斜線背景を実装しようと思っても、画像に頼るしかありませんでした。が、CSS3っって本当に便利。斜線もlinear-gradientを使えば実装できちゃいます。

KEY SENTENCE

[1] 使用例

[2] 実装方法

[3] borderの代わりに

[1] 使用例

example.)

Basic example

[2] 実装方法

linear-gradientにtransparentを使えばあっという間に実装ができます。

HTMLとCSSをそれぞれ以下のように記述していきましょう。

HTML
<div class="stripe">Basic example</div>
CSS
.stripe {
margin: 0;
padding: 10px 20px;
background-color: #53727d;
background-image: -webkit-linear-gradient(-45deg, #455765 25%, transparent 25%, transparent 50%, #455765 50%, #455765 75%, transparent 75%, transparent);
background-image: linear-gradient(-45deg, #455765 25%, transparent 25%, transparent 50%, #455765 50%, #455765 75%, transparent 75%, transparent);
background-size: 20px 20px;/*数字を大きくすれば太く、小さくすれば細くなります。*/
text-shadow:1px 1px 2px rgba(0,0,0,.3);
}

基本はたったこれだけです。是非実装してみてください。

[3] borderの代わりに

個人的な活用例として一例だけ。

borderの代替として上記のストライプ背景を用いることも可能です。
といっても入れ子にして背景を指定するだけですが(笑)

Substitution border

これだけでも結構印象が大きく変えられるので試してみる価値はありですよ。