CSS を使用して単純なプロンプトを作成する box_html/css_WEB-ITnose

Web 開発では、ユーザー エクスペリエンスを向上させるために、ユーザーをガイドするためにいくつかのプロンプト ボックスがよく使用されます。ここでは、いくつかの単純なプロンプト ボックスの作成を共有します。四角形の右上隅

ここで使用する主な知識は、相対と絶対を使用してこのようなプロンプト ボックスを簡単に作成できることです。詳しく知りたい場合は、ここをクリックしてください

html コード:

<div id="position">        <div class="position-relative">            <span>提示信息</span>            <a href="javascript:;"><i class="icon">&times;</i></a>        </div></div>

。

css コード:

　　　　 #position {          　position: relative;         　 width: 500px;         　 height: 400px;            margin: 0 auto;         　 color: #fff;         　 background: #66cccc;　　　　 } 　　　　#position .position-relative {            position: relative;            top: 20px;            left: 20px;            width: 300px;            height: 200px;            padding: 20px;            background: #999;        }        #position .position-relative .icon {            display: block;            position: absolute;            top: -10px;            right: -10px;            overflow: hidden;            /*            white-space: nowrap;            text-overflow: ellipsis;            */            border-radius: 50%;            width: 20px;            height: 20px;            line-height: 20px;            color: #eee;            font-style: normal;            text-align: center;            background: #666;        }

2. このような QQ ダイアログ ボックスもあります

位置決めの知識を備えたこの種のダイアログ ボックスは、主に左側の小さな三角形の作成に関するものです。実際、これを作成するにはボーダーを使用できます。まず、例を開いてみましょう:

Span タグを見てみましょう

html

<span class="icon-s"></span><br />

css

.icon-s {            display: block;            margin: 0 auto;            width: 0;            height: 0;            border-style: solid;            border-width: 40px;            border-top-color: red;            border-right-color: blue;            border-bottom-color: yellow;            border-left-color: black;}

効果を見てみましょう:

どうですか！すごいですね。実際、ここでは 4 つの辺のうちの 1 つを維持するだけで済み、残りの 3 つの辺を透明に設定するだけです

css

.icon-s {            display: block;            margin: 0 auto;            width: 0;            height: 0;            border-style: solid;            border-width: 40px;            border-top-color: transparent; /*-*/            border-right-color: red;            border-bottom-color: transparent; /*-*/<br />            border-left-color: transparent; /*-*/<br />}

これで、基本的なプロトタイプが表示されます。 , 次に変更して、上の境界線の高さを0にして、右の境界線の幅を少し長めに設定しましょう

css:

.icon-s {            display: block;            margin: 0 auto;            width: 0;            height: 0;            border-style: solid;            border-width: 40px;            border-top-width: 0; //            border-right-width: 70px; //            border-top-color: transparent;            border-right-color: red;            border-bottom-color: transparent;            border-left-color: transparent;}

左側の三角形が出てくるので、簡略化しましょうコード:

.icon-s {            display: block;            margin: 0 auto;            width: 0;            height: 0;            border-style: solid;            border-color: transparent red transparent transparent;            border-width: 0 70px 40px 40px;}

以前のバージョンの IE では透明属性がサポートされていないことを考慮して、点線または破線を設定できます

その理由は、IE6 では点線と点線が境界線の幅に基づいているためです。点線の長さは幅の 3 倍以上 (高さ>=境界線-幅*3)、点線の幅と長さは幅の 5 倍以上でなければなりません (高さ>=境界線) -width*5)、それ以外の場合は、点線も点線も表示されません。