上の写真に示すように、矢印のある箱を見ることができます。この矢印は、背景写真または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に他の方法がある場合、私はとても感謝しています。この記事があなたを助けることができることを願っています。