CSSで縦・横・斜めストライプ

CSSで縦・横・斜めストライプ

“background-image: linear-gradient”と” background-size”を組み合わせてCSSでストライプを描画することができます。

構文

構文

background-image: linear-gradient(角度, 開始色 カラーストップ位置, 終了色 カラーストップ位置)

background-size: 幅 高さ

横ストライプ

HTML
<div class="stripes-horizontal"></div>
CSS
.stripes-horizontal {
    width: 180px;
    height: 150px;
    background-image: linear-gradient(
        #ff5a5a 50%,
        #fff25e 50%
    );
    background-size: 100% 30px;
}
TIPS

ボーダーの高さはbackground-sizeの2つ目の数値”30px”の部分を変更して調整します。
ボックスの高さ(150px)で割り切れる数値にするとピッタリ合います。

縦ストライプ

HTML
<div class="stripes-vertical"></div>
CSS
.stripes-vertical {
    width: 180px;
    height: 150px;
    background-image: linear-gradient(90deg, #ff5a5a 50%,#fff30e 50%);
    background-size: 30px 100%;
}
TIPS

ボーダーの幅はbackground-sizeの1つ目の数値”30px”の部分を変更して調整します。
ボックスの幅(180px)で割り切れる数値にするとピッタリ合います。

斜めストライプ

HTML
<div class="stripes-diagonal"></div> 
CSS
.stripes-diagonal {
    width: 180px;
    height: 150px;
    background-image: linear-gradient(
        45deg,
        #ff5a5a 24.95%,
        #fff25e 25%,
        #fff25e 49.95%,
        #ff5a5a 50%,
        #ff5a5a 74.95%,
        #fff25e 75%
    );
    background-size: 50px 50px;
} 
TIPS

ストライプの角度を変更するには”45deg”の部分を変更します。ボーダー幅はbackground-sizeの数値で調整します。

カラーストップ位置が中途半端なのは?

カラーストップ位置が24.95%や74.95%と小数点込みの数字になっているのは、隣接するカラーストップ位置をピッタリにした場合、斜めの角度とブラウザによってはジャギー(ガタガタ)が発生してしまうためです。
カラーストップ位置を微妙にずらし、グラデーション効果で補完し滑らかにしています。

この記事をシェア

Categories

Profile

兵庫県神戸市でWEB/DTPまわりのフリーランスをしています。
当ブログは主に業務で出会った諸々の備忘録です。

イラストスイッチ