ボーダーと疑似要素:before,:afterを使って飾ります
【表示サンプル】
【cssサンプル】
div#ribbon1{
width:240px; height:2.2em;
margin:1em auto; padding:0;
position:relative; z-index:auto;
color:#696969;
font-size:small;
text-align:center;
}
div[align="center"]{
content:"";
width:110%; height:100%;
position:absolute; z-index:-1; left:-5%;
box-sizing:border-box;
background-origin:border-box;
border:15px solid rgba(0,0,0,0);
border-right:8px solid #ffffff;
border-left:8px solid #ffffff;
}
div[align="center"],
div[align="center"]:before{
background-color:#ffe4e1;
}
div[align="center"] > a{
padding:0 5px;
}:beforeの幅をdiv[align="center"]より10%広めに設定し、左右のボーダーの色を背景と同色に設定、:beforをposition:absolute; z-index:-1; left:-5%;でdivの後ろに配置することでリボンの形を作っています
div[align="center"],div[align="center"]:beforeにbackground-imageを指定すれば、柄リボンにすることも可能です
box-sizing:border-box;と
background-origin:border-box;でボーダー領域にも背景を表示することができるようになっています
【表示サンプル】
【cssサンプル】
div[align="center"]{
max-width:240px;
height:2.2em;
margin:1em auto;
position:relative;
z-index:auto;
box-shadow:0 0 5px 0 rgba(0, 0, 0, 0.5),
0 12px 0 -5px #ffffff;
color:#696969;
font-size:small
}
div[align="center"]:after{
content:'';
width:100%;
position:absolute; z-index:-1;
top:100%; left:0;
box-sizing:border-box;
background-origin:border-box;
border-top:5px solid dimgray;
border-left:5px solid transparent;
border-right:5px solid transparent
}
div[align="center"]:before{
content:"";
width:110%; height:100%;
position:absolute; z-index:-1;
top:3px; left:-5%;
box-sizing:border-box;
background-origin:border-box;
border:15px solid rgba(0,0,0,0);
border-right:8px solid #ffffff;
border-left:8px solid #ffffff
}
div[align="center"],
div[align="center"]:before{
background-color:#ffc0cb;
}
a[href^="/search"],
a[href="lyze"],
a[href*="bit.ly"]{
padding:0 5px; color:#696969 !important
}
まっすぐリボンではdivとdiv:beforeを完全に重ねていたのですが、おりこみリボンでは:beforeを3px下げています
:afterはたたまれたリボンの裏地部分を描画しています
まっすぐリボンのときと同じく背景画像を指定すれば柄リボンのできあがり！
