ピンをHTMLとCSSで

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>

これで、こんなのが表示される。