Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.