プロンプトボックスでもナビゲーションバーでも、上の図のように矢印の付いたフレームが表示されますが、このような矢印は背景画像やCSSで実現できます。 CSS を使用してこれを実現する 3 つの方法。
まず幅と高さが 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 つの方法を紹介します。とても感謝してください。この記事があなたのお役に立てれば幸いです。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
