HTML
CSS
CSS3

CSSで赤い丸を作ってみる

イメージ

スクリーンショット 2017-11-17 13.54.49.pngスクリーンショット 2017-11-17 13.59.05.png

こんな感じで、丸の中に数字を入れる!

コード

HTML

html
<p class="maru">{数字}</p>

今回はpタグで作ったけど別になんでもいい。

style

css
.maru{
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: 22px;
    background-color: #e82a2a;
    color: #fff;
    text-align: center;
    line-height: 22px;
    margin-bottom: 6px;
}

サイズとか色は後で好きに変える感じ!(・ω・)/

色々色変更があるバッヂのように使うのであれば下記のように
ベースと背景色を分けてもいいかも

css
.base{
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: 22px;
    color: #fff;
    text-align: center;
    line-height: 22px;
    margin-bottom: 6px;
}
.red{
    background-color: #e82a2a;
}