CSS 疑似要素を使用して三角形のツールチップを作成する実装テクニック

以下のエディターは、CSS 疑似要素を使用して三角形のプロンプト ボックスを作成する実装方法を示します。編集者はこれがとても良いと思ったので、参考として共有します。エディターをフォローして見てみましょう。

CSS 疑似要素は、冗長な DOM 要素を使用せずにいくつかの一般的な機能を実装する方法を提供します。これを使用して三角形のツールチップを実装してみましょう。

以下は DOM 構造です:
以下は対応する CSS スタイルです:

XML/HTML コードコンテンツをクリップボードにコピーします

<p class="tooltip-wrapper bottom">    
    <p class="arrow"></p>    
    <p class="content">    
        This is content    
    </p>    
</p>

CS S コードコンテンツをクリップボードにコピーします

.tooltip-wrapper {    
    position: absolute;    
    z-index: 9999;    
    padding: 5px;    
    background: white;    
    border: 1px solid #7d7d7d;    
    border-radius: 5px;    
}    
.tooltip-wrapper .arrow,    
.tooltip-wrapper .arrow:after {    
    position: absolute;    
    display: block;    
    width: 0;    
    height: 0;    
    border-color: transparent;    
    border-style: solid;    
}    
.tooltip-wrapper .arrow {    
    border-width: 11px;    
}    
.tooltip-wrapper .arrow:after {    
    content: "";    
    border-width: 10px;    
}    
.tooltip-wrapper.bottombottom .arrow {    
    top: -11px;    
    left: 50%;    
    margin-left: -11px;    
    border-top-width: 0;    
    border-bottom-color: #7d7d7d;    
}    
.tooltip-wrapper.bottombottom .arrow:after {    
    top: 1px;    
    margin-left: -10px;    
    border-top-width: 0;    
    border-bottom-color: white;    
}

CSS 疑似要素を使用して三角形のプロンプト ボックスを作成する上記の方法は、エディターによって共有されるすべてのコンテンツですので、参考にしていただければ幸いです。 PHP中国語ウェブサイトをサポートしていただければ幸いです。

CSS 疑似要素を使用して三角形のプロンプト ボックスを作成する実装テクニックの詳細については、PHP 中国語 Web サイトの関連記事に注目してください。