有孔ボード
透過処理してあるので『#ffe』(２箇所)をお好きな色にすれば背景色を変えられます。白や薄い色がお勧めです。
【css】
body{/*有孔ボードの背景*/
background-color:#ffe;
background-size:20px 20px;
background-position:0 0,2px 2px;
background-image:
radial-gradient(transparent 5px,#ffe 5px),
radial-gradient(rgba(100,100,100,.1) 5px,rgba(0,0,0,.2) 5px,rgba(0,0,0,.2) 7px);
}
適宜必要なプロパティを追加してください
こんな感じの枠はいかがでしょうか。長いので直接cssよりもheadに記述した方が良いと思いますが、一応載せておきます。
【html(直接css)】
<div style="text-align:left; position:relative; background-color:#fff; box-shadow:2px 2px 3px rgba(0,0,0,.4); padding:30px 10px 10px 10px; border:solid 1px #ccc;">文章<div style="position:absolute; top: -10px; left:50px; display:block; padding:3px 80px;transform:rotate(-5deg); -webkit-transform:rotate(-5deg); border-left:dotted 2px rgba(0,0,0,0.2); border-right:dotted 2px rgba(0,0,0,0.2); box-shadow:0 0 3px rgba(0,0,0,0.3); background-color:rgba(255,255,100,.5);"><br /></div></div>