纯CSS实现气泡聊天框的方法
生活随笔
收集整理的這篇文章主要介紹了
纯CSS实现气泡聊天框的方法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.softwhy.com/" />
<title>純CSS實現氣泡聊天框的方法</title>
<style type="text/css"> .message-box
{ position:relative; width:200px; height:40px; line-height:40px; border:1px solid #000; text-align:center; color:#fff; border-radius:2px;background-color:green;
}
.triangle-border
{ position:absolute; overflow:hidden; width:0; height:0; border-width:8px 0 8px 8px ; border-style:dashed dashed dashed solid;top:13px;
}
.tb-border
{ right:-8px;border-color:transparent transparent transparent #000;
}
.tb-background
{ right:-7px;border-color:transparent transparent transparent green;
}
</style>
</head>
<body>
<div class="message-box"><span>氣泡聊天框實現</span> <div class="triangle-border tb-border"></div> <div class="triangle-border tb-background"></div>
</div>
</body>
</html>
運行結果： ??
運行結果： ??
轉載于:https://www.cnblogs.com/janney/p/6656795.html
總結
以上是生活随笔為你收集整理的纯CSS实现气泡聊天框的方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 记录皮尔逊相关系数-相似性比较算法
- 下一篇： CSS变形