一、三角形
1、代碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</title>
<style>
div{width:0;border-top:20px solid #fff;border-bottom:20px solid #9ff;border-left:20px solid #fff;border-right:20px solid #fff;}
</style>
</head>
<body>
<div></div>
</body>
</html>
2、效果：
在這里插入圖片描述
3、原理：
先將div寬度設(shè)為0，再用css給div加上四條邊框（注意要分開增加），然后將上、左、右邊框的顏色設(shè)置成背景同色即可。同理，如果要向下的三角形那么將下、左、右三條邊框的顏色設(shè)置一下就可以了。
二、對(duì)話框
1、代碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</title>
<style>
p{width:0;float:left;margin-top:5px;
border-top:5px solid #fff;
border-bottom:5px solid #fff;
border-left:5px solid #fff;
border-right:5px solid #9f9;}
span{float:left;width:100px;height:20px;background:#9f9;
/* 這下面是美化、根據(jù)個(gè)人調(diào)整。 */
border-radius: 5px;font:8px/20px "";
text-indent:10px;color:#333;}
</style>
</head>
<body>
<div>
<p></p>
<span>這是一個(gè)對(duì)話框。</span>
</div>
</body>
</html>
2、效果
在這里插入圖片描述
3、原理：
這里其實(shí)是第一個(gè)三角形和一個(gè)p標(biāo)簽拼合出來的效果，寬高大小都可以根據(jù)自己的需要調(diào)整。下面是步驟：
先將弄出的向左方向的三角形（border-right）和一個(gè)空標(biāo)簽放在一個(gè)div里，再用浮動(dòng)讓它們橫向布局。接著利用margin-top調(diào)整三角形的位置，一般是邊框多大就margin-top多少；
三、 吃豆人
1、代碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</title>
<style>
body{background:#000}
div{width:0;float:left;position:relative;
border-right:30px solid #000;
border-bottom:40px solid #ff0;
border-left:50px solid #ff0;
border-top:50px solid #ff0;
border-bottom-right-radius:40px;
border-bottom-left-radius:60px;
border-top-left-radius:60px;
border-top-right-radius:40px;
}
span{height:10px;width:10px;background:#000;position:absolute;left:-5px;top:-35px;border-radius:50%;}
p{float:left;background:#ff0;width:20px;height:20px;border-radius: 50%;margin:35px 15px 0 0;}
</style>
</head>
<body>
<div><span></span></div>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</body>
</html>
2、效果：
在這里插入圖片描述
3、原理：
先設(shè)一個(gè)div然后寫上4條邊框，按照上、右、下、左的順序分別是50、30、40、50像素。再將右上和右下調(diào)成40像素就形成了吃豆人嘴的部分。然后把左下和左上設(shè)置60像素把屁股部分變圓。再利用定位元素設(shè)置吃豆人的眼睛就OK了。（雖然并沒什么用）；
