html如何写对话框,用css写一个对话框

要实现的对话框效果

首先分析一下对话框的组成：大致可以分两部分，左边的矩形和右边的三角形。矩形实现起来简单，那么三角形呢？

三角形的实现首先要从div说起

1.首先画一个div，给它设置宽高和背景颜色。再加上四条边的边框

Document

.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;

}

效果如图

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;

最终 效果