ランキングタイトルをCSSで作る 1位 2位 3位
ワードプレステキストエディタにコピペするだけで表示できるリンクボタンです。
|
1 2 3 4 |
<span style="display:inline-block;height: 30px;width: 60px;overflow:hidden; position: relative;"> <span style="display:block;margin: 0px 0px 0px 0px;width: 10px;height: 0px;background: yellow;position: absolute;left:50%;top:0px; box-shadow: 0px 15px 0px 7.5px yellow,0px 30px 0px 15px yellow;padding:0px 0px 10px 0px ;color:#000000;"><span style="display:block;position: absolute;right:-50%;top:-18px;color:#000;font-size:12px;white-space:nowrap;font-weight:bold;"> 1位 </span></span></span> |
|
1 2 3 4 |
<span style="display:inline-block;height: 30px;width: 60px;overflow:hidden; position: relative;"> <span style="display:block;margin: 0px 0px 0px 0px;width: 10px;height: 0px;background: yellow;position: absolute;left:50%;top:0px; box-shadow: 0px 15px 0px 7.5px yellow,0px 30px 0px 15px yellow;padding:0px 0px 10px 0px ;color:#000000;"><span style="display:block;position: absolute;right:-50%;top:-18px;color:#000;font-size:12px;white-space:nowrap;font-weight:bold;"> 2位 </span></span></span> |
|
1 2 3 4 |
<span style="display:inline-block;height: 30px;width: 60px;overflow:hidden; position: relative;"> <span style="display:block;margin: 0px 0px 0px 0px;width: 10px;height: 0px;background: yellow;position: absolute;left:50%;top:0px; box-shadow: 0px 15px 0px 7.5px yellow,0px 30px 0px 15px yellow;padding:0px 0px 10px 0px ;color:#000000;"><span style="display:block;position: absolute;right:-50%;top:-18px;color:#000;font-size:12px;white-space:nowrap;font-weight:bold;"> 3位 </span></span></span> |