IE9とChromeでしか確認していませんっ!
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.wrapper {
position: relative;
width: 40px;
height: 55px;
}
.pin {
background-color: gray;
width: 40px;
height: 40px;
text-align: center;
vertical-align: middle;
border-radius: 20px;
color: white;
margin: 20px auto;
}
.pin:after {
position: absolute;
content: '';
border-top: 15px solid gray;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 0px;
top: 38px;
left: 15px;
}
.pin span {
line-height: 35px;
text-align: center;
vertical-align: central;
}
</style>
<div class="wrapper">
<div class="pin">
<span>12</span>
</div>
</div>
これで、こんなのが表示される。
![f:id:okazuki:20130313164105p:image f:id:okazuki:20130313164105p:image](http://cdn-ak.f.st-hatena.com/images/fotolife/o/okazuki/20130313/20130313164105.png)