【メモ】cssでセロテープ風の装飾ボックスを作る！
最近、セロテープ風の装飾ボックスを作る機会があったので、調べたことをメモとして残しておきます。

セロテープ風の装飾ボックスの基本形

【横向きのセロテープ】

セロテープ

html

  • <div class="tape">セロテープ</div>
AFFS Simple Code Viewer
Copy

css

  • .tape{
  • width:200px;
  • height:40px;
  • background-color: rgba(255,255,255,.5);
  • border-left: 2px dotted rgba(0,0,0,.1);
  • border-right: 2px dotted rgba(0,0,0,.1);
  • box-shadow: 0 0 3px rgba(0,0,0,0.3);
  • }
AFFS Simple Code Viewer
Copy

解説

background-color: rgba(255,255,255,.5);

背景全体を、半透明の白色で塗りつぶしています。

border-left: 2px dotted rgba(0,0,0,.1);
border-right: 2px dotted rgba(0,0,0,.1);

左右に点線を描くことで、セロテープの切断面を表現しています。

box-shadow: 0 0 3px rgba(0,0,0,0.3);

周囲を少しぼかしています。

width:200px;
height:40px;

細長い形状を作るために、幅と高さを固定しています。

装飾ボックスとして使用する場合は、高さを指定せずに、次のように幅と余白等を指定します。

width:100%;
padding:1em;

色バリエーション

rgbaの3つの値で、指定

rgba(赤,緑,青,透明度)

background-color: rgba(255,0,0,.5);

セロテープ(赤)

 

background-color: rgba(0,255,0,.5);

セロテープ(緑)

 

background-color: rgba(0,0,255,.5);

セロテープ(青)

 

background-color: rgba(255,100,100,.5);

セロテープ(ピンク)

透明度バリエーション

rgbaの4つ目の値で、透明度を指定。

0.0 .. 透明 ～ 1.0 ..不透明

background-color: rgba(255,0,0,0.1);

セロテープ(ほぼ透明)

 

background-color: rgba(255,0,0,0.3));

セロテープ(透明)

 

background-color: rgba(255,0,0,0.5));

セロテープ(半透明)

 

background-color: rgba(255,0,0,0.7));

セロテープ(やや透明)

 

background-color: rgba(255,0,0,1));

セロテープ(不透明)

【縦向きのセロテープ】

セロテープ

html

  • <div class="tape-tate">セロテープ</div>
AFFS Simple Code Viewer
Copy

css

  • .tape-tate{
  • width:40px;
  • height:200px;
  • background-color: rgba(255,255,255,.5);
  • border-top: 2px dotted rgba(0,0,0,.1);
  • border-bottom: 2px dotted rgba(0,0,0,.1);
  • box-shadow: 0 0 3px rgba(0,0,0,0.3);
  • }
AFFS Simple Code Viewer
Copy

解説

border-top: 2px dotted rgba(0,0,0,.1);
border-bottom: 2px dotted rgba(0,0,0,.1);

上下を点線にすることで、縦に貼ったセローテープを表現しています。

【斜めのセロテープ】

セロテープ

html

  • <div class="tape-naname">セロテープ</div>
AFFS Simple Code Viewer
Copy

css

  • .tape-naname{
  • width:200px;
  • height:40px;
  • background-color: rgba(255,255,255,.5);
  • border-left: 2px dotted rgba(0,0,0,.1);
  • border-right: 2px dotted rgba(0,0,0,.1);
  • box-shadow: 0 0 3px rgba(0,0,0,0.3);
  • transform:rotate(-45deg);
  • }
AFFS Simple Code Viewer
Copy

解説

transform:rotate(-45deg);

transform:rotate()を使用し、要素を回転させています。

装飾ボックスのラベルとして使用する

タイトル

html

  • <div class="box1">
  • <div class="tape-title">タイトル</div>
  • </div>
AFFS Simple Code Viewer
Copy

css

  • .box1{
  • border:2px solid #333;
  • background-color:#fff;
  • width:300px;
  • height:100px;
  • position:relative;
  • }
  • .tape-title{
  • width:200px;
  • height:40px;
  • background-color: rgba(10,255,255,.5);
  • border-left: 2px dotted rgba(0,0,0,.1);
  • border-right: 2px dotted rgba(0,0,0,.1);
  • box-shadow: 0 0 3px rgba(0,0,0,0.3);
  • transform:rotate(-5deg);
  • position:absolute;
  • top:-30px;
  • right:0;
  • }
AFFS Simple Code Viewer
Copy

解説

position:relative;(box1)

基準となるボックスに、position:relative;を指定します（必須）

position:absolute;

セロテープを自由に移動できるようにします。

top:-30px;

box1の上端から、さらに30px上に、セロテープを移動します。

right:0;

box1の右端に、セロテープを移動します。

バリエーション

transform:rotate(5deg);
top:-30px;
left:0;
タイトル
transform:rotate(-80deg);
bottom:0;
left:0;
transform-origin:bottom left; /* 回転の中心をセロテープの左下に設定 */
タイトル

before , after でセロテープを描画

html

  • <div class="box2" data-before="before" data-after="after">
  • </div>
AFFS Simple Code Viewer
Copy

css

  • .box2{
  • border:2px solid #333;
  • background-color:#fff;
  • width:300px;
  • height:100px;
  • position:relative;
  • }
  • .box2:before{
  • content:attr(data-before);
  • background-color: rgba(10,255,255,.5);
  • top:40px;
  • left:-10px;
  • transform:rotate(-45deg);
  • transform-origin:bottom left;
  • }
  • .box2:after{
  • content:attr(data-after);
  • background-color: rgba(255,10,255,.5);
  • top:40px;
  • right:-10px;
  • transform:rotate(45deg);
  • transform-origin:bottom right;
  • }
  • .box2:before,.box2:after{
  • width:100px;
  • height:30px;
  • border-left: 2px dotted rgba(0,0,0,.1);
  • border-right: 2px dotted rgba(0,0,0,.1);
  • box-shadow: 0 0 3px rgba(0,0,0,0.3);
  • position:absolute;
  • }
AFFS Simple Code Viewer
Copy

解説

装飾ボックスのbefore,after要素を、セロテープの形状に加工しています。
基本は、今までのものと同じです。

こちらも読まれています エックスサーバーとConoHa VPSからmixhostにサーバー移行した理由と結果