Tokyo Q Studio

Web制作・WordPress・BootStrap・DTM制作・SEO対策

画像を使わずに、スタイルシートでぎざぎざの線をかくテクニック

こんだけ出来てもIE問題は無くなりません(笑)

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

下記は、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

 
背景色・前景色・サイズを変更すると、スタイルシートが表示され、ページ下部にすぐに反映されます。
 

  関連記事

  • no image
    ソーシャルメディアで嘘をつくのは女性だけ?
    眉唾。 男尊女卑反対です。 http://japan.cnet.com/news/off… iPhoneから送信
  • 2013年に公開された50種のjQueryプラグイン集「50 Most Us eful jQuery Plugins from 2013」
    http://design-develop.net/web-… こんなにふえてたんだ。 一つ一つ試したい!
  • (いろいろ追記)正直・・こんな国産スマホが出たらiPhone から買い換える。たとえAndroidでも!!
    激しく同意! 何が便利で何が必要かを理解出来なくなっているんでしょうか… とにかく柔らか頭で行きましょう!   http://blogos.com/article/5684… 実 ...
  • すべて無料! Macで書くためのお役立ちツール4選
    結構便利そうなものあったのでチェック! http://www.lifehacker.jp/2012/… iPhoneから送信
  • Facebookが新しいニュースフィードを公開します。本社で発表イベ ント開催。
    どう言う風に表示されるのか。 普通だったら… http://www.gizmodo.jp/2013/03/…  
  • 新世代通信「5G」がもたらすかもしれない、生活&サ ービス6つの変化
    ますますWebの浸透化が加速しそうです。 頑張らねば! http://engineer.typemag.jp/art…
  • iTunes音楽の中古売買に違法判決
    デジタルデータと中古販売。 それはダメでしょf^_^;) パッケージされてるならまだしも、コピーとなんら変わらないですからね。 http://gendai.ismedia.jp/artic… ...
  • Evernoteにウェブ記事のスクラップを手軽に作成できるアプリ『エバークリップ』
    GoogleChromeで既に使っているエバーノートクリッパー。 便利です。 http://www.lifehacker.jp/2013/… iPhoneから送信
  • 1週間の天気がひと目でわかる、地球規模の気象予報サイト「Forecast」
    大規模な天気図。 地球が生きてると感じます。 http://www.lifehacker.jp/2013/… iPhoneから送信
  • 必要な時だけ賢く使える、イー・モバイルのアウトレット端末が激 安で放出中!下り最大42MbpsのEMOBILE G4対応機種も
    ほほ~… 9月に更新なので考えます(`_´)ゞ http://labaq.com/archives/5178… 急な仕事や出張の時だけ、外でスマートフォンやパソコンからインターネットに接続 ...