要实现的对话框效果
首先分析一下对话框的组成：大致可以分两部分，左边的矩形和右边的三角形。矩形实现起来简单，那么三角形呢？
三角形的实现首先要从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
點擊查看更多內(nèi)容
為 TA 點贊
評論
評論
共同學習，寫下你的評論
評論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會繼續(xù)努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦