要实现的对话框效果
首先分析一下对话框的组成：大致可以分两部分，左边的矩形和右边的三角形。矩形实现起来简单，那么三角形呢？
三角形的实现首先要从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.我们需要的是左侧的那个三角形，把其他的三角形边框样式设置成透明即可
.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.接下来要实现的对话框主体
设置宽高，以及圆角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;
最终 效果
网友评论