A summary box and an example are displayed with an arrow, and an arrow box is used to summarize an instance.

A summary box and an example are displayed with an arrow, and an arrow box is used to summarize an instance.

 

Both the prompt box and the navigation bar can see the box with arrows shown in. This arrow can be implemented through the background image or css. This article introduces three types of prompt boxes with arrows through css.

1. border attributes:

Let's first create a div with a width and height of 10 PX and a border of 10 PX,

1 width: 10px;2 height: 10px;3 border: 10px solid;4 border-color: red green yellow blue; 

For example:

The blank space in the figure is the width and height we set. If it is set to 0 PX, what will happen ?, For example:

 

At this time, we can set the color of the left and right sides and the bottom border to be transparent or the same color as the background, and then we will get the triangle we want. For example:

Now we can achieve the effect of the first image:

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> message </span> 3 <div class = "nav-border"> </div> 4 <div class = "nav-background"> </div> 5 </div>

 

Ii. CSS3 transfrom

First, we create a div box with two adjacent borders of the same color and the other two sides with a border of 0 PX.

You can rotate the Box 45 degrees to implement the Triangle Tip effect.

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> message </span> 3 <div class = "nav"> </div> 4 </div>

 

3. Special Character'♦'

'♦'Is a special character, which is equivalent to a word, so the size is set through font-size to achieve the effect of the first image:

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> message </span> 3 <div class = "nav-border">♦</Div> 4 <div class = "nav-background">♦</Div> 5 </div>

 

 

 

The following is a demo compatible with IE 5.5 +, chrome, Firfox, and other browsers. If it is useful, you can directly test your project.

 1 <!DOCTYPE html> 2 
 
:
Summary:
The prompt box with arrows brings good effects to user interaction. This article introduces three methods. If you have other methods, You Can @ me. I am very grateful. I hope this article will be helpful to you.