practice

<html>

.ボックス{position:relative;
margin:100px;
padding:20px;
width:500px;
height:700px;
background-color:#f8f8f8;
box-shadow:0 4px 6px rgba(0,0,0,0.2);
box-sizing:border-box;}

.マスキング{position:absolute;
top:-23px;
right:-24px;
height:130px;
width:129px;
background-color:rgba(255,255,0,0.2);
border:1px dotted red;}

.アタッチメント{position:absolute;
top:35px;
left:-7px;
height:18px;
width:160px;
text-align:center;
padding:6px;
font-size:12px;
font-weight:bold;
line-height:16px;
background-color:#008b9f;
color:#ffffff;
letter-spacing:0.05em;
transform:rotate(45deg);
box-shadow:0 2px 2px rgba(0,40,80,0.3);}

.アタッチメント::before,.アタッチメント::after{content:"";
position:absolute;
border-top:16px solid #456789;
border-left:16px solid transparent;
border-right:16px solid transparent;
bottom:0px;}

.アタッチメント::before{top:30px;
left:0px;}

.アタッチメント::after{top:30px;
right:00px;}
</style>

<div class="ボックス">
<div class="マスキング">
<div class="アタッチメント">Attachment</div>
</div>
<h1>ボックス + アタッチメント<span>- - - - - - - - - - - - - - - - →</span></h1>
<h2>マスキング に overflow:hidden; を指定する.</h2>
<p>アタッチメント::before / アタッチメント::after を追加する.</p>
</div>

</html>