CSSで斜め線、縦線、横線をbackground-imageでサクっと作る！【動画】

カテゴリー︎： 【CSS】・【便利ツール】

CSS  background-imageの背景画像で

 

斜め線とか縦線・横線って以外と作るの面倒だし、色とか線幅とか。。。手間がかかります。
 
しかし、クライアント様からの要望には応えたい。。。
 
探したらあった！
 
海外のwebツールだけど　こりゃいいね！
 
【Stripe Generator】⇒http://www.stripegenerator.com/
 
というwebツール。超楽チン
 
まず、このサイトにアクセスして、ごにょごにょ設定して
 
ボタンを押すだけでpng画像が生成されダウンロードできます！
 
素晴らしい！
 
いままでは、photoshopでちまちま作って、
 
色とか、線幅とか変更するのも一苦労していたので　感動的です。

 

使い方は英語ですが操作は簡単です。
 
こちらの動画↓↓↓を参考にしてください。

 
最後に【download】ボタンを押すと、自分のPCに書き出した画像が保存されます。
 
↓今回この画像をダウンロードできました（縦線）。

 
超楽チンですね！ 
では続いて、斜め線を作ってみる 

 
↓この画像をダウンロードできました（斜め線）。

 
 
ダウンロード後のファイル名が長いので、それぞれファイル名を変更しました。
 
ピンクの縦線⇒bg_1.png
 
緑の斜め線⇒bg_2.png
 
html、css、ディレクトリは実装している動画↓↓↓を参考にしてください。
 

 

時間がない人はこちらでソースをコピペしてください。
 

【HTMLソース】

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="style.css" media="all">
</head>
<body>
 
 
 
<div class="bg_1">
CSSバックグラウンド背景⇒縦線画像
</div>
 
 
<div class="bg_2">
CSSバックグラウンド背景⇒斜め線画像
</div>
 
 
     
 
</body>
</html>

【CSSソース】

div.bg_1{
background: url("images/bg_1.png");
    width: 800px;
    height: 250px;
    text-align: center;
    margin:0px auto;
}
 
div.bg_2{
background: url("images/bg_2.png");
    width: 800px;
    height: 250px;
    text-align: center;
    margin:0px auto;
}