A speech bubble contains a rectangle and an arrow. It is very easy
to create without an image just using CSS.
to create without an image just using CSS.
<html>
<head>
<style type="text/css">
.speech-bubble {
position:relative;
padding:30px 15px;
margin:1em 0 3em;
border:5px solid #ae3124;
text-align:center;
color:#000;
background:#fff;
width:150px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
}
/* Create a right curve */
.speech-bubble:before {
content:"";
position:absolute;
z-index:10;
bottom:-40px;
left:50px;
width:50px;
height:30px;
border-style:solid;
border-width:0 5px 5px 0;
border-color:#ae3124;
background:transparent;
-webkit-border-bottom-right-radius:80px 50px;
-moz-border-radius-bottomright:80px 50px;
border-bottom-right-radius:80px 50px;
}
/* Create a left curve */
.speech-bubble:after {
content:"";
position:absolute;
z-index:10;
bottom:-40px;
left:50px;
width:20px;
height:30px;
border-style:solid;
border-width:0 5px 5px 0;
border-color:#ae3124;
background:transparent;
-webkit-border-bottom-right-radius:40px 50px;
-moz-border-radius-bottomright:40px 50px;
border-bottom-right-radius:40px 50px;
display:block;
}
</style>
</head>
<body>
<div class="speech-bubble"> Hello Hubkart</div>
For more tutorials visit Hubkart
</body>
</html>
Post a Comment