Home > Developer > JavaScript
Arrow box and arrow box
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.
In the image, what software is used for text labeling with arrows in the box?The whole figure of the landlord .... Look Confused
How to control the arrow position with an arrow box in CSS?Change the direction of the arrow image and locate the image again.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
