Saturday, February 24, 2018

Creating an arrow box like chat application using css

Today, we are going to learn How to make a box with arrow in CSS like chat application. If  you have used Facebook and Google chat applications, you may have been observed arrow pointed head at left and right of the div. Lets check the below screenshot, in case you haven't observed.


How to make a box with arrow in CSS,Creating an arrow box like chat application using css,Learn How to make a box with arrow in CSS like chat application,build more understanding on arrow chat head design



Learn How to make a box with arrow in CSS like chat application:

Lets see the complete source code that helps to build more understanding on arrow chat head design. Here we are using border and border-color property of the css to design arrow pointed head. Below CSS style-sheet design helps us to design left side pointed chat box head :

.div-left:before{
 content:"";
 position:absolute;
 width:0px;
 height:0px;
 border: 10px solid;
 border-color: transparent #87CEFA transparent transparent;
 left:-20px;
 top:10px;
}

chat arrow design.html
Add the below HTML and CSS code, that helps you to design arrow box like chat application using css.


<style>
.div-left{
 position:relative;
 background:#87CEFA;  
 width:300px;
 padding:10px; 
 border-radius:5px;
 margin:10px;
}
.div-left:before{
 content:"";
 position:absolute;
 width:0px;
 height:0px;
 border: 10px solid;
 border-color: transparent #87CEFA transparent transparent;
 left:-20px;
 top:10px;
}
.div-right{
 position:relative;
 background:#87CEFA;  
 width:300px;
 padding:10px; 
 border-radius:5px;
}
.div-right:before{
 content:"";
 position:absolute;
 width:0px;
 height:0px;
 border: 10px solid;
 border-color: transparent transparent transparent #87CEFA ;
 right:-20px;
 top:10px;
}
 
</style> 

<div style="width:500px;margin:40px auto;">
 <div class="div-left">
  Hello everyone!!!
 </div> 

 <div class="div-right">
  Hello everyone!!!
 </div> 
</div> 

Download Link :
https://github.com/skptricks/php-Tutorials/tree/master/Creating%20an%20arrow%20box%20like%20chat%20application%20using%20css

Demo Link :
https://skptricks.github.io/learncoding/design%20arrow%20box%20like%20chat%20application%20using%20css/chat%20arrow%20design.html

This is all about Creating box having pointed arrow using CSS. Hope you like this simple example. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.


No comments:

Post a Comment