プラスってCSSで作れますかー？
作れますよー
プラス
See the Pen CSSだけで、プラスをつくる by 125naroom (@125naroom) on CodePen.
HTML
<div class="plus"></div>
CSS
.plus {
position: relative;
width: 30px;
height: 30px;
margin: 0 5px;
}
.plus:before, .plus:after {
display: block;
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: #333;
border-radius: 10px;
}
.plus:before {
width: 5px;
height: 30px;
}
.op_plus:after {
width: 30px;
height: 5px;
}
マイナス
See the Pen CSSだけで、マイナスをつくる by 125naroom (@125naroom) on CodePen.
HTML
<div class="minus"></div>
CSS
.minus {
position: relative;
width: 30px;
height: 30px;
margin: 0 5px;
}
.minus:after {
display: block;
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: #333;
border-radius: 10px;
width: 30px;
height: 5px;
}
わーい
疑似要素を使えば簡単ですよー
