かずきのBlog@hatena

すきな言語は C# + XAML の組み合わせ。Azure Functions も好き。最近は Go 言語勉強中。日本マイクロソフトで働いていますが、ここに書いていることは個人的なメモなので会社の公式見解ではありません。

ピンを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>

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