ミギムキ

[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); }