まずはサンプル

LINEスタンプ絶賛発売中です。

サンプル2：特に幅をしていない場合は、内容物に合わせて伸縮します。画像を配置するなど、内容は好きに使えます。

HTML

HTMLはこんな感じ。 クラス名：paperのボックスを、クラス名：tapeのボックスで囲う構造です。

<div class="tape">
<div class="paper" style="width: 300px;">

サンプル1：横幅300pxのボックスです。

</div>
</div>

セロテープのCSS

クラス名：tapeのボックスには　position:relative;　を与えます。そうしておくことで、内容物の大きさが変わってもセロテープを表現するBeforeとAfterがちゃんと右端上と左端上に配置されます。

また display:inline-block; としておくと、ボックス要素でも内容物に合わせて幅が伸縮します。

.tape {
    position:relative;/*テープの表示位置の基準となる*/
    display:inline-block;/*内容に合わせて幅も伸縮させる*/
}
.tape::before, .tape::after {
    content: "";
    display: block;
    position: absolute;
    background: rgba(255,255,255,0.2);
    box-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}
.tape::before {
    left: -5%;
    top: -10%;
    width: 25%;
    height: 50px;
    transform: rotate(-10deg);
}
.tape::after {
    right: -5%;
    top: -10%;
    width: 24%;
    height: 50px;
    transform: rotate(10deg);
}

上記ではBeforeとAfterの共通項目をある程度まとめて記述していますが、左右の違いをもっと出してもかわいいです。

例：左右のテープに違いを出した場合

パターンやグラデーションもCSSで

背景のパターンやグラデーションも、CSS3ならコードだけで表現できますが、コードをイチから書くのは中々たいへん。

そんな場合はヘルプツールやコードサンプルを活用します。私がよくお世話になっているのは以下。

【パターンサンプル】CSS3 Patterns Gallery

【グラデーション作成ツール】Ultimate CSS Gradient Generator

紙っぽいBoxのCSS

セロテープで貼るボックスのデザインはなんでもいいのですが、サンプルでは紙っぽいものにしてみました。

そのCSSはこんな感じ。

.paper{
    padding:50px;/*セロテープにかからないように、適宜Paddingをいれる*/
    box-shadow:1px 1px 2px rgba(0,0,0,.3);
    background: linear-gradient(to bottom,  rgba(252,255,244,1) 0%,rgba(239,239,225,1) 100%); 
}