要實現(xiàn)的對話框效果
首先分析一下對話框的組成：大致可以分兩部分，左邊的矩形和右邊的三角形。矩形實現(xiàn)起來簡單，那么三角形呢？
三角形的實現(xiàn)首先要從div說起
1.首先畫一個div，給它設置寬高和背景顏色。再加上四條邊的邊框
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.one{
width:100px;
height:100px;
border-top: 50px solid pink;
border-left: 50px solid red;
border-right: 50px solid yellow;
border-bottom: 50px solid blue;
background-color:greenyellow;
}
</style>
</head>
<body>
<div class="one"></div>
</body>
</html>
效果如圖
2.再把div的width、height置零，看看效果
.one{
width:0px;
height:0px;
border-top: 50px solid pink;
border-left: 50px solid red;
border-right: 50px solid yellow;
border-bottom: 50px solid blue;
}
3.我們需要的是左側(cè)的那個三角形，把其他的三角形邊框樣式設置成透明即可
.one{
width:0px;
height:0px;
border-top: 20px solid transparent;
border-left: 30px solid ghostwhite ;
border-right: 30px solid transparent;
border-bottom: 20px solid transparent;
}
淺灰色三角形效果
4.接下來要實現(xiàn)的對話框主體
設置寬高，以及圓角border-radius 屬性
width:200px;
height:100px;
background-color:#cdcdcd ;
margin-top:50px;
border-radius:20px;
對話框
為對話框添加陰影
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
能力有限只能做成醬紫 ，最后添加上文字
添加如下代碼：
text-align:center;
line-height:100px;（行高等于div的高度）
FONT-SIZE: 20PX;
最終 效果
