かずきのBlog@hatena

日本マイクロソフトに勤めています。このブログは個人ブログなので、ここに書いている内容は個人的な意見で会社の公式見解ではない点にご注意ください。好きなものは XAML と C# 。苦手なものは型の無い言語です。

ピンをHTMLとCSSで

IE9Chromeでしか確認していませんっ!

<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>

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