[CSS] 四則演算記号（＋/－/×/÷/＝）をCSSで描きたい

公開日:2019/01/14 更新日:2020/09/20

サイトにちょっとした説明図を乗せるとき、わざわざ画像を作らずにHTMLとCSSでなんとかすることがあります
そういった説明図でよく使いたいのが四則演算の記号。フォントサイズを思い切り大きくした文字でもやれないことはないのですが、CSSで描画した方が配置の取り回しが効きます
というわけで、四則演算の（＋、－、×、÷）アイコンと＝アイコンをCSSで書いてみました
各クラスの「font-size: 30px;」「color: #3388dd;」を調整するだけでサイズと色が変えられます。使用する場所に応じて微調整してください

「＋」記号

html

<div class="plus"></div>

CSS

.plus {
    display: inline-block;
    position: relative;
    width: 3em;
    height: 3em;
    color: #3388dd;
    font-size: 30px;
}
.plus::before,
.plus::after {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 0.5em;
    height: 0.5em;
    background-color: currentColor;
    content: "";
}
.plus::before {
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
}
.plus::after {
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
}

「－」記号

html

<div class="minus"></div>

CSS

.minus {
    display: inline-block;
    position: relative;
    width: 3em;
    height: 3em;
    color: #3388dd;
    font-size: 30px;
}
.minus::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 100%;
    height: 0.5em;
    background-color: currentColor;
    content: "";
}

「×」記号

html

<div class="times"></div>

CSS

.times {
    display: inline-block;
    position: relative;
    width: 3em;
    height: 3em;
    color: #3388dd;
    font-size: 30px;
    transform: rotate(45deg);
}
.times::before,
.times::after {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 0.5em;
    height: 0.5em;
    background-color: currentColor;
    content: "";
}
.times::before {
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
}
.times::after {
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
}

「÷」記号

html

<div class="divided"><span></span></div>

CSS

.divided {
    display: inline-block;
    position: relative;
    width: 3em;
    height: 3em;
    color: #3388dd;
    font-size: 30px;
}
.divided::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 100%;
    height: 0.5em;
    background-color: currentColor;
    content: "";
}
.divided > span {
    position: absolute;
    width: 100%;
    height: 100%;
}
.divided > span::before,
.divided > span::after {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background-color: currentColor;
    content: "";
}
.divided > span::before {
    top: 0px;
}
.divided > span::after {
    bottom: 0px;
}

「＝」記号

html

<div class="equal"></div>

CSS

.equal {
    display: inline-block;
    position: relative;
    width: 3em;
    height: 3em;
    color: #3388dd;
    font-size: 30px;
}
.equal::before,
.equal::after {
    position: absolute;
    left: 0px;
    transform: translateY(-50%);
    width: 100%;
    height: 0.5em;
    background-color: currentColor;
    content: "";
}
.equal::before {
    top: calc(50% - 0.5em);
}
.equal::after {
    top: calc(50% + 0.5em);
}

CSSでアイコンを描いてみるシリーズ

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。