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%と小数点込みの数字になっているのは、隣接するカラーストップ位置をピッタリにした場合、斜めの角度とブラウザによってはジャギー（ガタガタ）が発生してしまうためです。
カラーストップ位置を微妙にずらし、グラデーション効果で補完し滑らかにしています。ストライプの角度を変更するには”45deg”の部分を変更します。ボーダー幅はbackground-sizeの数値で調整します。ます。ッタリ合います。