MENU

CSSでプラスアイコンを作る方法

お問い合わせとかでよく使う、プラスアイコンとマイナスアイコンってどうやって作るんだろう?

質問項目の右端で、クリックするとプラスアイコンとマイナスアイコンが切り替わるサイトってよくあります。

今回は、プラスとマイナスをどうやってcssで表現するのかを解説します。

目次

マイナスアイコン

まずはマイナスアイコンです。

See the Pen マイナスアイコン by YT (@YT-the-scripter) on CodePen.


.box::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 3px;
  background-color: red;
}

空の擬似要素(3px、横幅30px)に背景色を付けています。

シンプルですが、これでマイナスアイコンが実装できます。

プラスアイコン

次は上記のマイナスアイコンに追記して、プラスアイコンを作ります。

See the Pen プラスアイコン by YT (@YT-the-scripter) on CodePen.


.box::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: red;
  transform: rotate(-90deg);
}

追記しているのは、transform: rotate(-90deg);のみ。

この1行で90度要素を回転させて、上向きの棒線を表現しています。

まとめ

以上、プラスアイコンの作り方についてまとめました。

擬似要素で棒線を二つ作り、一つだけtransform: rotate(-90deg);で回転させる。

これでプラスアイコンを表現できます。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

リゾバ→工場→牧場と転々とした後、フロントエンジニアに。
現在はWebコーダーとして、Web制作に特化した学習記録をアップしています。

X→https://twitter.com/yuhi1321
note→https://note.com/yuhi1321

コメント

コメントする

目次