ミギムキ

[CSS] 四則演算記号(+/-/×/÷/=)をCSSで描きたい

「+」記号

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でアイコンを描いてみるシリーズ

ご質問を受け付け中。24時間以内にお返事します

記事の中でわからなかったところ、もっと知りたかったことなど、お気軽にお問い合わせください。原則、24時間以内にお返事させていただきます。

お問い合わせは下記フォームより送信いただくか、ツイッターアカウント@flat8migiにDMをお送りください。

スポンサー広告