How to design comment div in CSS
| Previous | Home | Next |
CSS code for deigning div-
<style type="text/css">
.uparrowdiv, .downarrowdiv, .leftarrowdiv, .rightarrowdiv{
width:600px;
min-height:40px;
background: black;
color:white;
padding:5px;
position:relative;
word-wrap:break-word;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
margin-bottom:2em;
}
.uparrowdiv:after{
content:'';
display:block;
position:absolute;
top:-20px;
left:30px;
width:0;
height:0;
border-color: transparent transparent black transparent
;
/*border color should be same as div div background color*/
border-style: solid;
border-width: 10px;
}
.downarrowdiv:after{
content:'';
display:block;
position:absolute;
top:100%;
left:30px;
width:0;
height:0;
border-color: black transparent transparent transparent
;
border-style: solid;
border-width: 10px;
}
.leftarrowdiv:after{
content:'';
display:block;
position:absolute;
top:10px;
left:-20px;
width:0;
height:0;
border-color: transparent black transparent transparent
;
border-style: solid;
border-width: 10px;
}
.rightarrowdiv:after{
content:'';
display:block;
position:absolute;
top:10px;
left:100%;
width:0;
height:0;
border-color: transparent transparent transparent black
;
border-style: solid;
border-width: 10px;
}
</style>
HTML code for using CSS-
<body> <form id="form1" runat="server"> <div class="uparrowdiv"> This is a example of Div!! </div> <div class="downarrowdiv"> This is a example of Div!! </div> <div class="leftarrowdiv"> This is a example of Div!! </div> <div class="rightarrowdiv"> This is a example of Div!! </div> </form> </body>
output
| Previous | Home | Next |