arrow_html/css_WEB-ITnose を使用したプロンプトボックスの概要の例-htmlチュートリアル-php.cn

arrow_html/css_WEB-ITnose を使用したプロンプトボックスの概要の例

WBOY

リリース： 2016-06-24 11:15:37

オリジナル

1328 人が閲覧しました

プロンプトボックスでもナビゲーションバーでも、上の図のように矢印の付いたフレームが表示されますが、このような矢印は背景画像やCSSで実現できます。 CSS を使用してこれを実現する 3 つの方法。

border 属性を通して
アイデア: 2 つの三角形、2 つの三角形の差が境界線として 1px になるように配置します。
CSS3 変換
アイデア: まず 2 つの辺が同じ色の正方形を作成し、それを一定の角度で回転させて三角形を形成します
特殊文字 '♦'
アイデア: 特殊文字が上部から漏れ出す三角形のように見えます

1. border 属性を通して:

まず幅と高さが 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 つの方法を紹介します。とても感謝してください。この記事があなたのお役に立てれば幸いです。