要实现的对话框效果
首先分析一下对话框的组成：大致可以分两部分，左边的矩形和右边的三角形。矩形实现起来简单，那么三角形呢？
三角形的实现首先要从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;
最终 效果
作者：DivMa
链接：https://www.jianshu.com/p/cf378c0f1ec2
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦