HOME

ABOUT

ARCHIVES

CONTACT

css3

CSS3:CSSのみでギザギザ線を実装する。

今回はlinear-gradientのtransparentを使って、ギザギザ線の作り方を。
簡単に実装できるのでお試しください。

KEY SENTENCE

[1] ギザギザ線の実例

[2] 実装方法

[1] ギザギザ線の実例

こういうのを作ります。

GIZAGIZA LINE

[2] 実装方法

HTML,CSSはそれぞれ以下のように記述して下さい。

HTML
<div class="gizagiza">GIZAGIZA LINE</div>
CSS
.gizagiza {
padding:1em;/*記載しなくてもおk*/
background:
linear-gradient(-135deg, #53727d 4px, transparent 0) 0 4px,
linear-gradient(135deg, #53727d 4px, #fff 0) 0 4px;/*#fffはギザギザ線下部の色です*/
background-position: left bottom !important;/**/
background-repeat: repeat-x !important;
background-size: 8px 8px;
background-color: #53727d;/*記載しなくてもおk*/
color:#ffc800;/*記載しなくてもおk*/
text-shadow:0 1px 3px rgba(0,0,0,.5);/*記載しなくてもおk*/
}

CSSはdiv要素でもp要素でも構いませんので、ご自由に。

ギザギザ線の大きさを変えたい場合は、cssのうち、backgroundの4カ所の4pxの部分とbackground-sizeの8px 8px部分をそれぞれ変更してあげれば自由に変更可能です。
backgroundで指定した大きさの2倍の大きさをbackground-sizeにあててあげてください。

それすらもめんどくさい方はこちらのジェネレータをお使いください。

CSS Jagged Border Generator

背景色・ギザ下部色・ギザギザサイズを指定するだけでCSSを書き出してくれます。

Siyabonga ekufundeni kwakho.(訳:最後まで読んでくれてありがとう。 / 注:ズールー語)