CSS3 を使用して左上または右上隅にリマインダードットを表示するサンプルコード

効果画像（三角形をご希望の場合は、ここをクリックしてください）：

コード：

<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 の詳細な説明