CSSでプラスアイコンとマイナスアイコン

プラスアイコン

//HTML <span class="icon_wrap"><i class="icon_plus"></i></span>

マイナスアイコン

//HTML <span class="icon_wrap"><i class="icon_minus"></i></span>

CSS

.icon_wrap{ display: inline-block; padding: 4px; border: #333 solid 1px; border-radius: 4px; line-height: 0.8; } .icon_plus{ display: inline-block; position: relative; width: 20px; height: 20px; } .icon_plus:before,.icon_plus:after{ display: block; content: ''; background-color: #333; border-radius: 10px; position: absolute; width: 20px; height: 5px; top: 7px; left: 0; } .icon_plus:before{ width: 5px; height: 20px; top: 0; left: 7px; } .icon_minus{ display: inline-block; position: relative; width: 20px; height: 20px; } .icon_minus:before{ display: block; content: ''; background-color: #333; border-radius: 10px; position: absolute; width: 20px; height: 5px; top: 7px; left: 0; }

コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

同じカテゴリの前後の記事


  1. KATOON.NET
  2. TRASH
  3. CSSでプラスアイコンとマイナスアイコン