htmlチュートリアル

純粋な CSS は、ツールヒントプロンプトボックスを実装します。CSS の矢印と図形の継続により、ツールヒントプロンプトボックス全体に境界線が追加されます。

純粋な CSS は、ツールヒントプロンプトボックスを実装します。CSS の矢印と図形の継続により、ツールヒントプロンプトボックス全体に境界線が追加されます。

PHPz

Jun 24, 2016 am 11:52 AM

このビデオでは、CSS だけを使用してツールチップのようなツールチップボックスと矢印の形状を作成する方法を紹介します。

最初にCSS: after selectorを紹介します

定義と使用法: (w3school:after selectorを参照)

: afterセレクターは、選択した要素のコンテンツの後にコンテンツを挿入し、挿入するコンテンツを指定するためにcontent属性を使用します。

例:

p:after
{
content:"台词：-";
background-color:yellow;
color:red;
font-weight:bold;
}

以下では、CSS 矢印やその他のプロンプトボックスを作成するためのセレクターの後の使用方法を紹介します: (ここでは、簡単なステップバイステップのデザインを示します。各ステップで追加されるコンテンツは、追加のスタイルコードコンテンツです。前のステップとの違いに注目してください)

まず、HTML コード:

<body>
<div class="demo">
</div>
</body>

ボックスのスタイルを設定しましょう:

<style>
.demo{
background-color: lightgreen;
height: 100px;
position: relative;
width: 100px;
}</style>

スクリーンショット:

ここでは、position 属性を次のように設定していることに注意してください。相対的に「矢印」(まだありません) を設定して、それを絶対的に配置し、ボックスに接続したままにします。

その後、「矢印」(まだ表示されていません) を挿入し続けます。基本スタイル:

<style>
.demo{
background-color: lightgreen;
height: 100px;
position: relative;
width: 100px;
}
.demo:after{
content:&#39;&#39;;
position:absolute;
height:20px;
width:20px;
background:yellow;
}</style>

スクリーンショット:

いくつかのことに気づくでしょう。 1. 黄色の四角形を挿入しただけです。矢印としてデザインされた四角形。次に、希望の位置に移動できるように絶対位置を設定します。

続けて、黄色の四角形 (「矢印」の前身) に境界線を設定し、ここでの境界線は矢印の実体であり、(スタイル「高さ:0;幅:」を設定することによって) 黄色の四角形の内容を削除します。デモの 0":after "黄色の四角形を削除します。ここでは黄色の四角形の高さと幅を省略します):

<style>
.demo{
background-color: lightgreen;
height: 100px;
position: relative;
width: 100px;
}
.demo:after{
content:&#39;&#39;;
position:absolute;
//height:20px;
//width:20px;
background:yellow;
border:10px solid gray;
}</style>

スクリーンショット:

次に、灰色の境界線の四角を矢印の形にデザインします:

<style>
.demo{
background-color: lightgreen;
height: 100px;
position: relative;
width: 100px;
}
.demo:after{
content:&#39;&#39;;
position:absolute;
//height:20px;
//width:20px;
//background:yellow;
//border:10px solid gray;
border:10px solid transparent;
border-top-color:gray    }
</style>

スクリーンショット:

OK!矢印が形になっていくのがわかります。

希望の位置に設定しましょう (この場合、矢印は下端に移動します):

<style>
.demo{
background-color: lightgreen;
height: 100px;
position: relative;
width: 100px;
}
.demo:after{
content:&#39;&#39;;
position:absolute;
//height:20px;
//width:20px;
//background:yellow;
//border:10px solid gray;
border:10px solid transparent;
border-top-color:gray;
top:100%;
left:10px;
}</style>

スクリーンショット:

基本的にはここで完了です

全体的なスタイルデザインは以下の通りです(実際に変更したのはボックスの背景色は矢印の色と同じです):

<style>
.demo{
background-color: gray;
height: 100px;
position: relative;
width: 100px;
}
.demo:after{
content:&#39;&#39;;
position:absolute;
//height:20px;
//width:20px;
//background:yellow;
//border:10px solid gray;
border:10px solid transparent;
border-top-color:gray;
top:100%;
left:10px;
}</style>

スクリーンショット:

必要な特定のスタイルを設定できます。たとえば、矢印を他の 3 つの側面に移動するには、border-TRBL-color:gray と TRBL を設定します (TRBL は、toprightbottomleft を指します)。

もちろん、ボックスの境界線の矢印の位置を変更する場合は、注意する必要があります。境界線のサイズはボックス自体のサイズには含まれません。したがって、デザインする際にはマージンの影響に注意する必要があります。たとえば、矢印が下の境界線の中央にある場合は、上記を考慮して、中央に配置するために「margin-left:-10px;」を追加する必要があります。！

結論は、yy Duckweed Life のコメントから来ています (簡潔なイメージ~~笑~~):

この例の設計原則: 疑似クラスセレクターボックスの幅と高さを 0 に設定し、形成される領域あそこの枠線が[X]ですこのように、他の3辺が透明になるので、三角形が表示されます！

この記事の出典: https://www.cnblogs.com/xuyongsky1234/p/4152853.html

声明

この記事はcnblogsで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTML対CSS対JavaScript：比較概要Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

HTML：それはプログラミング言語か何か他のものですか？Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

HTML：Webページの構造の構築Apr 14, 2025 am 12:14 AM

HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。

テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AM

HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。

HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。