上の写真に示すように、矢印のある箱を見ることができます。この矢印は、背景写真またはCSSを通じて実現できます。この記事では、CSSを介して矢印のある3つのプロンプトボックスを紹介します。
1。境界属性を渡します
アイデア:2つの三角形、2つの三角形は、位置決めによって境界として1pxとは異なります。
2.CSS3変換
アイデア:まず、両側に同じ色の正方形を作り、次にそれを特定の角度に回転させて三角形にします。
3。特殊文字 '♦'
考え:特殊文字の前半は漏れており、三角形のように見えます
1。境界属性を渡す:
最初に10pxの幅と高さの両方でDivを作成しましょう。また、境界線も10pxです。
幅:10px;高さ:10px;国境:10pxソリッド;ボーダーカラー:赤い緑色の黄色の青。
下の図に示すように:
写真の中央にある空白は、設定した幅と高さです。 0pxに設定されている場合、どうなりますか? 、以下に示すように:
この時点で、左と下の境界の色を透明性または背景色と同じ色に設定でき、必要な三角形が出てきます。下の図に示すように:
それでは、最初の写真への影響を達成しましょう。
CSS:
.info {margin-top:50px;位置:相対;幅:200px;高さ:50px; Line-Height:60px;背景:#f6f1b3; Box-Shadow:1PX 2PX 3PX#E9D985;ボーダー:1pxソリッド#DACE7C;ボーダーラジウス:4px;テキストアライグ:センター;色:赤; } .nav {position:absolute;左:30px;オーバーフロー:隠し;幅:0;高さ:0;境界線:10px;ボーダースタイル:ダッシュしたダッシュされたダッシュ。 } .nav-border {top:-20px;境界線:透明な透明な#DACE7C透明。 } .nav-background {top:-19px;境界線:透明な透明#F6F1B3透明。 }HTML:
<div> <span>プロンプトメッセージ</span> <div> </div> <div> </div> </div>
2。CSS3変換
最初に、同じ色の2つの隣接する境界と0pxの他の2つの境界を備えたDivボックスを作成します。写真に示されているように:
ボックスを45度回転させて、三角形のプロンプト効果を実現します。
CSS:
.info {margin-top:50px;位置:相対;幅:200px;高さ:50px; Line-Height:60px;背景:#f6f1b3; Box-Shadow:1PX 2PX 3PX#E9D985;ボーダー:1pxソリッド#DACE7C;ボーダーラジウス:4px;テキストアライグ:センター;色:赤; } .nav {position:absolute;上:-8px;左:30px;オーバーフロー:隠し;幅:13px;高さ:13px;背景:#f6f1b3;国境左:1px solid#dace7c;ボーダートップ:1px solid#dace7c; -webkit-transform:回転(45deg); -moz-transform:Rotate(45Deg); -o-transform:Rotate(45deg);変換:回転(45DEG); }HTML:
<div> <span>プロンプトメッセージ</span> <div> </div> </div>
3。特殊文字 '♦'
「♦」は特別なキャラクターであり、キャラクターに相当するため、サイズはフォントサイズから設定されて、最初の画像の効果を実現します。
CSS:
.info {margin-top:50px;位置:相対;幅:200px;高さ:50px; Line-Height:60px;背景:#f6f1b3; Box-Shadow:1PX 2PX 3PX#E9D985;ボーダー:1pxソリッド#DACE7C;ボーダーラジウス:4px;テキストアライグ:センター;色:赤; } .nav {position:absolute;左:30px;オーバーフロー:隠し;幅:24px;高さ:24px;フォント:通常の24px "Microsoft yahei"; } .nav-border {top:-17px;色:#dace7c; } .nav-background {top:-16px;色:#f6f1b3; }HTML:
<div> <span>プロンプトメッセージ</span> <div>♦</div> <div>♦</div> </div>
以下は、IE5.5+、Chrome、Firfox、その他のブラウザと互換性のあるデモです。使用する場合は、自分のプロジェクトに直接試験を受けることができます。
<!doctype html> <html> <head> <title> </title> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <style> div.container {position:absolute;トップ:30px;左:40px;フォントサイズ:9pt;表示:ブロック;高さ:100px;幅:200px;背景色:透明; *ボーダー:1pxソリッド#666; } s {position:absolute;トップ:-20px; *TOP:-22px;左:20px;表示:ブロック;高さ:0;幅:0;フォントサイズ:0; Line-Height:0;境界線:透明な透明#666透明。ボーダースタイル:ダッシュした破線の固体が破壊されました。境界線:10px; } i {position:absolute;上:-9px; *TOP:-9px;左:-10px;表示:ブロック;高さ:0;幅:0;フォントサイズ:0; Line-Height:0;境界線:透明な透明#FFF透明。ボーダースタイル:ダッシュした破線の固体が破壊されました。境界線:10px; } .content {border:1px solid#666; -moz-border-radius:3px; -webkit-border-radius:3px;位置:絶対;バックグラウンドカラー:#fff;幅:100%;高さ:100%;パディング:5px; *TOP:-2px; *ボーダートップ:1pxソリッド#666; *ボーダートップ:1pxソリッド#666; *ボーダートップ:1px solid *border-left:none; *境界線右:なし; *高さ:102px; Box-shadow:3px 3px 4px; -moz-box-shadow:3px 3px 4px; -webkit-box-shadow:3px 3px 4px; / * IE 5.5-7 */フィルター:progid:dmimagetransform.microsoft.shadow(strength = 4、direction = 135、color = '#99999'); / * IE 8 */ -ms -filter: "progid:dmimagetransform.microsoft.shadow(strength = 4、direction = 135、color = '#99999')"; } </style> </head> <body> <div> <div> <div> Hello World! </div> <s> <i> </i> </s> </div> </body> </html>複製画像:
まとめ:
矢印付きのプロンプトボックスは、ユーザーの相互作用に良い結果をもたらします。この記事では、3つの方法を紹介します。 @Meに他の方法がある場合、私はとても感謝しています。この記事があなたを助けることができることを願っています。