You can see the box with arrows as shown in the above picture. This arrow can be realized through background pictures or css. This article introduces three prompt boxes with arrows through css.
1. Pass the border attribute
Idea: Two triangles, the two triangles are different from 1px as the border by positioning.
2.CSS3 transform
Idea: First make a square with the same color on two sides, and then rotate it to a certain angle to make it a triangle.
3. Special characters '♦'
Thought: The first half of the special characters are leaked, and they look like triangles
1. Pass the border attribute:
Let's first make a div with both width and height of 10px, and the border is also 10px.
width: 10px; height: 10px; border: 10px solid; border-color: red green yellow blue;
As shown in the figure below:
The blank in the middle of the picture is the width and height we set. If it is set to 0px, what will happen? , as shown below:
At this time, we can set the colors of the left and lower borders to be transparent or the same color as the background color, and the triangle we want will come out. As shown in the figure below:
Now let's achieve the effect on the first picture:
css:
.info { margin-top: 50px; position:relative; width:200px; height:50px; line-height:60px; background:#F6F1B3; box-shadow:1px 2px 3px #E9D985; border:1px solid #DACE7C; border-radius:4px; text-align:center; color:red; } .nav { position:absolute; left:30px; overflow:hidden; width:0; height:0; border-width:10px; border-style:solid dashed dashed dashed; } .nav-border { top:-20px; border-color:transparent transparent #DACE7C transparent; } .nav-background { top:-19px; border-color:transparent transparent #F6F1B3 transparent; }html:
<div> <span>Prompt message</span> <div></div> <div></div> </div>
2. CSS3 transform
We first make a div box with two adjacent borders with the same color and the other two borders with 0px. As shown in the picture:
Rotate the box by 45 degrees to achieve the triangle prompt effect.
css:
.info { margin-top : 50px; position :relative; width :200px; height :50px; line-height :60px; background :#F6F1B3; box-shadow :1px 2px 3px #E9D985; border :1px solid #DACE7C; border-radius :4px; text-align :center; color :red; } .nav { position :absolute; top :-8px; left :30px; overflow :hidden; width :13px; height :13px; background :#F6F1B3; border-left :1px solid #DACE7C; border-top :1px solid #DACE7C; -webkit-transform :rotate(45deg); -moz-transform :rotate(45deg); -o-transform :rotate(45deg); transform :rotate(45deg); }html:
<div> <span>Prompt message</span> <div></div> </div>
3. Special characters '♦'
'♦' is a special character, which is equivalent to a character, so the size is set through font-size to achieve the effect of the first picture:
css:
.info { margin-top: 50px; position:relative; width:200px; height:50px; line-height:60px; background:#F6F1B3; box-shadow:1px 2px 3px #E9D985; border:1px solid #DACE7C; border-radius:4px; text-align:center; color:red; } .nav { position:absolute; left:30px; overflow:hidden; width:24px; height:24px; font:normal 24px "Microsoft Yahei"; } .nav-border { top:-17px; color:#DACE7C; } .nav-background { top:-16px; color:#F6F1B3; }html:
<div> <span>Prompt message</span> <div>♦</div> <div>♦</div> </div>
Below is a demo that is compatible with IE5.5+, chrome, Firfox and other browsers. If you use it, you can directly take the exam to your own project.
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"><style> div.container{ position :absolute; top :30px; left :40px; font-size :9pt; display :block; height :100px; width :200px; background-color :transparent; *border :1px solid #666; } s{ position :absolute; top :-20px; *top :-22px; left :20px; display :block; height :0; width :0; font-size : 0; line-height : 0; border-color :transparent transparent #666 transparent; border-style :dashed dashed solid dashed; border-width :10px; } i{ position :absolute; top :-9px; *top :-9px; left :-10px; display :block; height :0; width :0; font-size : 0; line-height : 0; border-color :transparent transparent #fff transparent; border-style :dashed dashed solid dashed; border-width :10px; } .content{ border :1px solid #666; -moz-border-radius :3px; -webkit-border-radius :3px; position :absolute; background-color :#fff; width :100%; height :100%; padding :5px; *top :-2px; *border-top :1px solid #666; *border-top :1px solid #666; *border-top :1px solid *border-left :none; *border-right :none; *height :102px; box-shadow : 3px 3px 4px; -moz-box-shadow : 3px 3px 4px; -webkit-box-shadow : 3px 3px 4px; /* For IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999'); /* For IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')"; } </style> </head> <body> <div> <div> <div> hello world! </div> <s> <i></i> </s> </div> </body> </html>Reproduction image:
summary:
The prompt box with arrows brings good results to user interaction. This article introduces three methods. If you have other methods to @me, I would be very grateful. Hope this article can help you.