How to Create Speech Bubbles Without Images using CSS ?
We can create awesome speech bubbles using HTML and CSS with no image, no JavaScript, no extra frameworks, or anything.
With a single HTML div, element we are creating a speech bubble, you may choose any other element. We will make a simple box with some styles which we can adjust according to our choices. After that, we will make a triangular tip to our box to make it look like a speech bubble. The important part is the positioning relative or absolute.
Example: The following code helps in creating a speech bubble using HTML and CSS3.
HTML
<!DOCTYPE html>
< html >
< head >
< style >
/* Creating a box with a text
and some stylings */
.speech {
width: 250px;
background: green;
padding: 30px;
text-align: center;
font-size: 35px;
border-radius: 35px;
color: cyan;
position: relative;
}
/* Creates triangular tip on the
end, for our speech bubble
with some styling */
.speech:before {
content: "";
position: absolute;
border-left: 20px solid green;
border-right: 20px solid transparent;
border-top: 20px solid green;
border-bottom: 20px solid transparent;
right: -20px;
top: 10px;
}
</ style >
</ head >
< body >
< div class = "speech bubble" >GeeksForGeeks</ div >
</ body >
</ html >
|
Output:
Last Updated :
24 Jun, 2021
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...