重慶分公司
重慶分公司，新征程啟航
為企業提供網站建設、域名注冊、服務器等服務
CSS怎么制作對話框氣泡
小編給大家分享一下CSS怎么制作對話框氣泡，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
創新互聯是一家專業提供雁山企業網站建設,專注與成都網站建設、成都做網站、H5場景定制、小程序制作等業務。10年已為雁山眾多企業、政府機構等服務。創新互聯專業的建站公司優惠進行中。
HTML代碼
左邊
CSS代碼
.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;
}
接著，我們使用:before來制作箭頭部分，用:after來制作箭頭的邊
CSS代碼
.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;
}
看完了這篇文章，相信你對“CSS怎么制作對話框氣泡”有了一定的了解，如果想了解更多相關知識，歡迎關注創新互聯行業資訊頻道，感謝各位的閱讀！
網頁名稱：CSS怎么制作對話框氣泡
標題路徑：http://www.xueling.net.cn/article/podpps.html