1. ホーム
  2. css

[解決済み] Xクローズボタンのみcssを使用

2022-03-13 14:26:55

質問

CSS3で十字(X)だけを作り、閉じるボタンとして使用するにはどうすればよいですか?

ずっと探しているのですが、方法が見つかりません...。 それを使っているサイトのソースコードを見ると、いつも何か変なものがあって、取ったコードが使えなくなるんです。

欲しいXボタン http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/

画像をクリックすると、右のような十字架が表示されます。

CSS3でシンプルなXの十字架を作るための普遍的なCSSコードを誰かが投稿してくれたら、これは素晴らしいことだと思います。

どのように解決するのですか?

探している要点は

.tag-remove::before {
  content: 'x'; // here is your X(cross) sign.
  color: #fff;
  font-weight: 300;
  font-family: Arial, sans-serif;
}

参考までに、閉じるボタンは自分で簡単に作ることができます。

#mdiv {
  width: 25px;
  height: 25px;
  background-color: red;
  border: 1px solid black;
}

.mdiv {
  height: 25px;
  width: 2px;
  margin-left: 12px;
  background-color: black;
  transform: rotate(45deg);
  Z-index: 1;
}

.md {
  height: 25px;
  width: 2px;
  background-color: black;
  transform: rotate(90deg);
  Z-index: 2;
}
<div id="mdiv">
  <div class="mdiv">
    <div class="md"></div>
  </div>
</div>