<div class="cp_card">
コンテンツ
<div class="cp_ribbon06">
<span>Ribbon</span>
</div>
</div>
.cp_card {
width: 320px;
height: 340px;
position: relative;
background: #ffffff;
overflow: visible;
margin: 2em auto;
padding: 0.5em;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.cp_ribbon06 {
position: absolute;
top: -6.1px;
right: 10px;
}
.cp_ribbon06:after {
position: absolute;
width: 0;
height: 0;
content: '';
border-top: 10px solid #4DD0E1;
border-right: 53px solid transparent;
border-left: 53px solid transparent;
}
.cp_ribbon06 span {
font-size: 1em;
line-height: 1;
position: relative;
display: block;
width: 90px;
padding: 12px 8px 10px;
text-align: center;
color: #ffffff;
border-top-right-radius: 8px;
background: #4DD0E1;
}
.cp_ribbon06 span:before, .cp_ribbon06 span:after {
position: absolute;
content: '';
}
.cp_ribbon06 span:before {
top: 0;
left: -6px;
width: 6px;
height: 6px;
background: #4DD0E1;
}
.cp_ribbon06 span:after {
top: 0;
left: -8px;
width: 8px;
height: 6px;
border-radius: 8px 8px 0 0;
background: #00ACC1;
}