column

CSS3でギザギザの線をかくテクニック

CATEGORY CSS PC & Web お勉強 TAG,

投稿日:2013年7月13日 更新日:

執筆者:

CSS3だけでノコギリ歯

画像を使わずに、ノコギリの歯のようなぎざぎざの線をスタイルシートでかくテクニックを紹介します。

下記は、p要素一つだけです。
実装は、こんな感じです。

HTML

HTMLはpでもdivでも適当に。


<p>塩レモン</p>

 

CSS

ぎざぎざの線はlinear-gradientでかきます。

ぎざぎざのサイズは、4pxを4箇所、それを倍にした8pxを2箇所、変更してください。


p{
  padding:1em;
  background:
  linear-gradient(-135deg, #4885ff 4px, transparent 0) 0 4px,
  linear-gradient(135deg, #4885ff 4px, #fff 0) 0 4px;
  background-color: #4885ff;
  background-position: left bottom !important;
  background-repeat: repeat-x !important;
  background-size: 8px 8px;
}

 

面倒な方は下記のジェネレーターを使うと、簡単にできます。
CSS Jagged Border Generator
背景色・前景色・サイズを変更すると、スタイルシートが表示され、ページ下部にすぐに反映されます。


コメントを残す

関連記事

PREV

フェリカテクニカルアカデミー「東京・池袋」求職者支援訓練|Webサイト制作科|受講生の作品で紹介されました

NEXT

Logic Pro X

CSS3でギザギザの線をかくテクニック

side bar

メニューはこちら

メニューはこちら