How to make Dialog Bubble by CSS
Editor to share with you how CSS makes dialog bubbles. I hope you will get something after reading this article. Let's discuss it together.
HTML code
left
CSS code
. balloon-left {
Position:relative
Display:inline-block
Padding:015px
Width:auto
Min-width:150px
Height:40px
Line-height:34px
Text-align:center
Background:#44FF44
Border:3pxsolid#000000
Z-index:0
}
Next, we use: before to make the arrowhead part and: after to make the edge of the arrowhead
CSS code
. balloon-left:before {
Border-style:solid
Border-width:10px10px10px0
Border-color:transparent#44FF44transparenttransparent
Content: ""
Position:absolute
Top:50%;left:-8px
Margin-top:-9px
Display:block
Width:0px
Height:0px
Z-index:0
}
. balloon-left:after {
Border-style:solid
Border-width:11px11px11px0
Border-color:transparent#000000transparenttransparent
Content: ""
Position:absolute
Top:50%;left:-12px
Margin-top:-10px
Display:block
Width:0px
Height:0px
Z-index:-1
}
After reading this article, I believe you have a certain understanding of "how to make dialog bubbles in CSS". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!
