在漫島的註冊成功引導頁，有一個小姐姐講述一些網站玩法規則，需要一個對話氣泡效果，用純CSS實現了一下，效果如下（點擊圖片放大看）：
網站實際效果結合了動畫體驗比截圖好，，做氣泡不難，關鍵點在於三角形的border只能有兩邊，所以我的實現思路是用一個只有兩邊邊框的正方形，用transform: rotateZ(xxdeg)旋轉對應角度即可。
話不多說，直接貼完整代碼，複製粘貼拿回去看看就懂了。強調一句，圖片你得給我替換咯，別不是這個效果又罵我啊。我每次都是實現了才發博客的！
另外，漫島居民羣歡迎所有喜歡動漫或者交流技術的夥伴們加入，羣號：581062303。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>純CSS實現對話氣泡</title>
<style>
*{
padding: 0;
margin: 0;
}
html,body{
height: 100%;
width: 100%;
overflow: hidden;
background-color: #1A242F;
}
.girl {
position: absolute;
top: 50px;
left: 0;
right: 0;
width: 492px;
margin: 0 auto;
z-index: 9;
}
.dbubble {
opacity: 1;
position: absolute;
background-color: #fff;
border: 1px solid #dedede;
padding: 10px 15px;
z-index: 20;
border-radius: 8px;
}
.dbubble-text {
font-size: 14px;
color: #303030;
line-height: 1.6;
font-family: "微軟雅黑";
}
.triangle-box {
position: absolute;
}
.dbubble.dbubble1 {
top: 10px;
left: 0;
width: 238px;
}
.dbubble.dbubble2 {
top: 166px;
left: -224px;
width: 282px;
}
.dbubble.dbubble3 {
top: 168px;
right: -168px;
width: 242px;
}
.dbubble.dbubble4 {
opacity: 1;
top: 300px;
right: -168px;
width: 172px;
}
.decide {
display: flex;
width: 100%;
margin-top: 10px;
padding: 10px 0 0;
border-top: 1px solid #C0C4CC;
}
.decide a {
position: relative;
display: inline-block;
width: 49%;
text-align: center;
color: #0492FF;
font-size: 14px;
}
.decide a:hover {
color: #0084FF;
}
.decide a:first-child::after {
content: "";
position: absolute;
right: 0;
top: 0;
bottom: 0;
margin: auto 0;
width: 1px;
height: 16px;
border-left: 1px solid #DCDFE6;
}
.triangle {
width: 14px;
height: 14px;
border-bottom: 1px solid #dedede;
border-right: 1px solid #dedede;
background-color: #fff;
}
.triangle-box-bottom {
bottom: -9px;
left: 150px;
}
.triangle-box-bottom .triangle {
transform: rotateZ(45deg);
-moz-transform:rotateZ(45deg);
}
.triangle-box-right {
bottom: 50px;
right: -9px;
}
.triangle-box-right .triangle {
transform: rotateZ(-45deg);
-moz-transform:rotateZ(-45deg);
}
.triangle-box-left {
top: 20px;
left: -8px;
}
.triangle-box-left .triangle {
transform: rotateZ(135deg);
-moz-transform:rotateZ(135deg);
}
.triangle-box-top {
top: -4px;
left: 20px;
}
.triangle-box-top .triangle {
height: 7px;
transform: rotateZ(-157deg);
-moz-transform:rotateZ(-157deg);
}
</style>
</head>
<body>
<div class="girl">
<img src="../img/girl.png" />
<div class="dbubble dbubble1">
<div class="dbubble-text">嗨，新夥伴！我是引導員
<span style="color:#E6A23C;">妍</span>
<span>，漫島有很多規則和現實世界不一樣，所以請務必仔細聽我的講解喔。</span>
</div>
<div class="triangle-box triangle-box-bottom">
<div class="triangle"></div>
</div>
</div>
<div class="dbubble dbubble2">
漫島是一個專爲二次元，2.5次元的人們建立的虛擬區域，在這裏
我們將用技術手段確保你的所有行爲都能直接影響到整個漫島的發展，
因此這會是一個怎樣的世界完全取決於你們每一個人。
</div>
<div class="triangle-box triangle-box-right">
<div class="triangle"></div>
</div>
</div>
<div class="dbubble dbubble3">
<div class="dbubble-text">最後也是
是現實世界中的所有法律法規仍然在這個世界中適用，每一個人都要爲自己的行爲負責。
</div>
<div class="triangle-box triangle-box-left">
<div class="triangle"></div>
</div>
</div>
<div class="dbubble dbubble4">
<div class="dbubble-text">以上就是引導的全部內容，下一步就是去創建你的漫島身份啦。</div>
<div class="triangle-box triangle-box-top">
<div class="triangle"></div>
</div>
<div class="decide">
<a href="javascript:;">再看一遍</a>
<a href="javascript:;">創建角色</a>
</div>
</div>
</div>
</body>
</html>