<div class="sample"> <ul> <li> <a href="">リンク1</a> <p>リンク1の説明</p> </li> <li> <a href="">リンク2</a> <p>リンク2の説明</p> </li> <li> <a href="">リンク3</a> <p>リンク3の説明</p> </li> </ul> </div>

.sample ul{ text-align:left; position:relative; background-color:#fff; margin:30px 15px 15px 15px; padding:20px 10px 10px 10px; box-shadow:1px 2px 5px rgba(0,0,0,0.3); } .sample ul li{ line-height:1.5; padding:5px 0; border-bottom:solid 1px #eee; list-style-type:none; } .sample ul li:last-of-type{ border-bottom:none; } .sample ul li a{ text-decoration:none; color:#666; font-weight:bold; background:linear-gradient(#fff 70%, #bdf 70%); } .sample ul li p{ margin:0px; padding-left:1em; color:#789; }

/*ここから下がテープ部分*/ .sample ul:before{ position:absolute; top:-10px; right:-10px; display:block; text-align:center; content:'テープ使用見本'; font-size:1.2em; padding: 3px 30px; 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-image: radial-gradient(#fff 30%,transparent 0), radial-gradient(#def 30%,#bdf 0); background-position:0 0, 8px 8px; background-size:16px 16px; }