ホームページ > 記事 > ウェブフロントエンド > arrow_html/css_WEB-ITnose を使用したプロンプト ボックスの概要と例
arrow_html/css_WEB-ITnose を使用したプロンプト ボックスの概要と例
- WBOYオリジナル
- 2016-06-24 11:18:361060ブラウズ
プロンプトボックスでもナビゲーションバーでも、上の図のように矢印の付いたフレームが表示されますが、このような矢印は背景画像やCSSで実現できます。 CSS を使用してこれを実現する 3 つの方法。
- border 属性を通して
アイデア: 2 つの三角形、2 つの三角形の差が境界線として 1px になるように配置します。 - CSS3 変換
アイデア: まず 2 つの辺が同じ色の正方形を作成し、それを一定の角度で回転させて三角形を形成します - 特殊文字 '♦'
アイデア: 特殊文字が上部から漏れ出す三角形のように見えます
まず幅と高さが 10px の div を作成し、境界線も 10px です。
1 width: 10px;2 height: 10px;3 border: 10px solid;4 border-color: red green yellow blue;
以下に示すように:
空白画像の中央のスペースは、設定した幅と高さです。0pxに設定するとどうなりますか? 、以下に示すように:
このとき、その左右と下の境界線の色を透明または背景色と同じ色に設定すると、目的の三角形が表示されます。以下に示すように:
次に、最初の画像の効果を実現しましょう:
css:
1 .info { 2 margin-top: 50px; 3 position:relative; 4 width:200px; 5 height:50px; 6 line-height:60px; 7 background:#F6F1B3; 8 box-shadow:1px 2px 3px #E9D985; 9 border:1px solid #DACE7C;10 border-radius:4px;11 text-align:center;12 color:red;13 }14 .nav {15 position:absolute;16 left:30px;17 overflow:hidden;18 width:0;19 height:0;20 border-width:10px;21 border-style:solid dashed dashed dashed;22 }23 .nav-border {24 top:-20px;25 border-color:transparent transparent #DACE7C transparent;26 }27 .nav-background {28 top:-19px;29 border-color:transparent transparent #F6F1B3 transparent;30 }
html:
1 <div class="info">2 <span>提示信息</span>3 <div class="nav nav-border"></div>4 <div class="nav nav-background"></div>5 </div>
2. CSS3 変換
まず A を作成します同じ色の 2 つの隣接する境界線と、他の 2 つの側面に 0px の境界線を持つ div ボックス。写真に示すように:
ボックスを 45 度回転すると、三角形のプロンプト効果を実現できます。
css:
1 .info { 2 margin-top : 50px; 3 position :relative; 4 width :200px; 5 height :50px; 6 line-height :60px; 7 background :#F6F1B3; 8 box-shadow :1px 2px 3px #E9D985; 9 border :1px solid #DACE7C;10 border-radius :4px;11 text-align :center;12 color :red;13 }14 .nav {15 position :absolute;16 top :-8px;17 left :30px;18 overflow :hidden;19 width :13px;20 height :13px;21 background :#F6F1B3;22 border-left :1px solid #DACE7C;23 border-top :1px solid #DACE7C;24 -webkit-transform :rotate(45deg);25 -moz-transform :rotate(45deg);26 -o-transform :rotate(45deg);27 transform :rotate(45deg);28 }
html:
1 <div class="info">2 <span>提示信息</span>3 <div class="nav"></div>4 </div>
3. 特殊文字 ' '
' ' は特殊文字です。単語に相当するので、サイズは次のようになります。最初の画像の効果を達成するようにフォント サイズを設定します:
css:
1 .info { 2 margin-top: 50px; 3 position:relative; 4 width:200px; 5 height:50px; 6 line-height:60px; 7 background:#F6F1B3; 8 box-shadow:1px 2px 3px #E9D985; 9 border:1px solid #DACE7C;10 border-radius:4px;11 text-align:center;12 color:red;13 }14 .nav {15 position:absolute;16 left:30px;17 overflow:hidden;18 width:24px;19 height:24px;20 font:normal 24px "微软雅黑";21 }22 .nav-border {23 top:-17px;24 color:#DACE7C;25 }26 .nav-background {27 top:-16px;28 color:#F6F1B3;29 }
html:
1 <div class="info">2 <span>提示信息</span>3 <div class="nav nav-border">♦</div>4 <div class="nav nav-background">♦</div>5 </div>
以下は互換性のあるIE5.5です+ 、Chrome、Firefox、およびその他のブラウザーのデモです。便利な場合は、自分のプロジェクトで直接使用できます。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 6 <style> 7 div.container{ 8 position :absolute; 9 top :30px; 10 left :40px; 11 font-size : 9pt; 12 display :block; 13 height :100px; 14 width :200px; 15 background-color :transparent; 16 *border :1px solid #666; 17 } 18 s{ 19 position :absolute; 20 top :-20px; 21 *top :-22px; 22 left :20px; 23 display :block; 24 height :0; 25 width :0; 26 font-size : 0; 27 line-height : 0; 28 border-color :transparent transparent #666 transparent; 29 border-style :dashed dashed solid dashed; 30 border-width :10px; 31 } 32 i{33 position :absolute; 34 top :-9px; 35 *top :-9px; 36 left :-10px; 37 display :block; 38 height :0; 39 width :0; 40 font-size : 0; 41 line-height : 0; 42 border-color :transparent transparent #fff transparent; 43 border-style :dashed dashed solid dashed; 44 border-width :10px; 45 } 46 .content{ 47 border :1px solid #666; 48 -moz-border-radius :3px; 49 -webkit-border-radius :3px; 50 position :absolute; 51 background-color :#fff; 52 width :100%; 53 height :100%; 54 padding :5px; 55 *top :-2px; 56 *border-top :1px solid #666; 57 *border-top :1px solid #666; 58 *border-left :none; 59 *border-right :none; 60 *height :102px; 61 box-shadow : 3px 3px 4px #999; 62 -moz-box-shadow : 3px 3px 4px #999; 63 -webkit-box-shadow : 3px 3px 4px #999; 64 /* For IE 5.5 - 7 */65 filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999'); 66 /* For IE 8 */ 67 -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')"; 68 }69 </style>70 </head>71 <body>72 <div class="container">73 <div class="content">74 hello world!75 </div>76 <s>77 <i></i>78 </s>79 </div>80 </body>81 </html>
レンダリング:
概要:他の方法がある場合、この記事では 3 つの方法を紹介します。とても感謝してください。この記事があなたのお役に立てれば幸いです。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。