[解決済み] 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>
関連
-
[CSSチュートリアル]css display table adaptive height, widthの問題解決
-
[CSSチュートリアル】ピュアCSSで実装した通知バーの3種類のスクロール効果
-
[css3]Apple携帯電話のロック解除のためのCSS3サンプルフォントシャインエフェクト
-
[CSSチュートリアル】背景画像画面の適応的な実装を実現するCSS
-
[解決済み] CSSの親セレクタはありますか?
-
[解決済み] CSSでcellpaddingとcellspacingを設定する?
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] リンクのように動作するHTMLボタンを作成する方法
-
[解決済み] How do I style a <select> dropdown with only CSS?
-
[解決済み】HTML5入力のプレースホルダの色をCSSで変更する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[CSSチュートリアル】Pure CSSカスタム複数行抜け問題(原理から実装まで)
-
[CSSチュートリアル】CSSスコープ(スタイル分割)の使い方まとめ
-
[CSSチュートリアル】CSS+HTMLで実現するトップナビゲーションバー機能
-
[css3]ピュアCSS3でdivのinとoutの効果を順番に実現する
-
[CSSチュートリアル]cssの位置固定コードで左右2重の位置決め
-
[CSSチュートリアル】クールなネオン効果を実現するピュアCSS(デモあり)
-
[CSSチュートリアル】CSSでemを開く正しい方法 詳細へ
-
[css3] scss変数の値を実行時に変更するcss3 var()の使用方法を説明します。
-
[css3]赤いパケットのジッター効果を実現するCSS3
-
[CSSチュートリアル】SVGを使ったCSSアニメーションでエネルギーフローを表現する