建站
咨詢
售后
建站咨詢
新聞中心
小編給大家分享一下CSS怎么制作對話框氣泡，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
創(chuàng)新互聯(lián)是一家專業(yè)提供雁山企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站建設(shè)、成都做網(wǎng)站、H5場景定制、小程序制作等業(yè)務(wù)。10年已為雁山眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)的建站公司優(yōu)惠進(jìn)行中。
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怎么制作對話框氣泡”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！
分享文章：CSS怎么制作對話框氣泡
標(biāo)題鏈接：http://www.dlmjj.cn/article/podpps.html
