効果画像(三角形をご希望の場合は、ここをクリックしてください): コード: <html> <ヘッド> <スタイル タイプ="text/css"> .メッセージ_s { 位置: 相対的; カーソル: ポインタ; } .message_s:後{ 位置: 絶対; コンテンツ: ""; /*以下の内容は実際のニーズに応じて調整できます-----開始------*/ 上: 0px; left: -13px; /*変更後: right: -13px; ドットは右側に表示されます*/ 幅: 8px; 高さ: 8px; 境界線の半径: 50%; 背景色: #e98b7f; /* - - -終わり - - - */ } div { 高さ: 30px; 境界線: 1px #000 実線; 幅: 300ピクセル; 行の高さ: 30px; パディング: 0px 0px 0px 15px; } </スタイル> <スクリプト> 関数 clickAction() { console.log("もし天が私に指導者を与えてくれなかったら、鍵の道は夜のように長かったでしょう!"); } </スクリプト> </head> <本文> <div> <span class="message_s" onclick="clickAction()"></span> 剣は天国の門を開く </本文> </html> 付録: 左上隅にある赤い三角形のアイコンを見てみましょう。 図に示すように、赤い三角マークが左上隅に実装されています。 これは、位置、変換、境界属性に重点を置いて、疑似クラスを使用して実装されます。 位置を調整するには、上と左の値を変更するだけです。 <html> <ヘッド> <title> 新しいドキュメント </title> <スタイル> div { 背景色: #f4f4f4; パディング: 20px; } .メッセージ_s { 位置: 相対的; } .message_s:後{ 位置: 絶対; 上: -25px; 表示: ブロック; 幅: 0; 高さ: 0; 境界線: 16px 透明実線; コンテンツ: ""; -webkit-transform: 回転(45度)。 } .message_s:後{ 左: -25px; zインデックス: 0; 右境界線の色: 赤; } </スタイル> </head> <本文> <div> <span class="message_s">Internet Explorer 10、Firefox、Opera は transform 属性をサポートしています。 Internet Explorer 9 は、代替の -ms-transform プロパティ (2D 変換のみ) をサポートしています。 Safari と Chrome は、代替の -webkit-transform プロパティ (3D および 2D 変換) をサポートしています。 Opera は 2D トランジションのみをサポートします。 </span> </div> </本文> </html> CSS3 を使用して左上隅または右上隅にリマインダー ドットを表示する方法についての記事はこれで終わりです。CSS3 リマインダー ドットに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
<<: JavaScript プログラムのループ構造の詳細な説明
>>: Docker 可視化グラフィックツール portainer の詳細な説明
目次概要サブクエリサブクエリの分類クエリの結果によるとサブクエリの位置で区別する選択後のサブクエリサ...
この記事では、アバター変更機能を実装するためのJavaScriptの具体的なコードを参考までに共有し...
目次1. コンポーネント通信1. Props 親コンポーネント ---> 子コンポーネント通信...
1. 前提条件インポートには require.context メソッドを使用します。vite で作成...
問題を見つける今日、Docker コンテナ内のファイルを変更しようとしたところ、コンテナ内に vim...
MySQLに何がインストールされているか確認する rpm -qa | grep -i mysql n...
序文Linux では、コンパイルとリンクには Makefile を使用する必要がありますが、適切な ...
最近、プロジェクトをアップグレードするために Docker を使用しました。これまで使用したことがな...
HTML はタグと属性で構成されており、これらを組み合わせてブラウザにページの表示方法を指示します。...
目次1. scrapy_splash とは何ですか? 2. scrapy_splashの役割3. s...
chmod コマンド構文chmod コマンドを使用する場合の正しい構文は次のとおりです。 chmod...
この記事は主にJavaScriptを使用してWeb計算機を実現する効果を記録し、参考として掲載してい...
1. docker に nginx をインストールします。 docker に Nginx をインスト...
1. ダウンロードApacheの公式サイトhttp://httpd.apache.org/にアクセス...
まず、私たちがやりたいことは、serverA の usera を使用して、パスワードなしで serv...