纯CSS制作一个简单气泡对话框（图文详解）

	<div class="div"></div>

.div{
    width: 200px;
    height: 100px;
    border: 2px solid #ff0;
    position: relative;
	}

<p>1.下面是一个div.长宽为50*50的正方形，边框宽度为50</p>
<div class="div1"></div>

		.div1{
			width: 50px;
			height: 50px;
			border: 50px solid;
			border-color: yellow skyblue pink deeppink;
		}

		.div::before{
			content: '';
			width: 0;
			height: 0;
			border: 20px solid;
			position: absolute;
			bottom: -40px;
			left: 140px;
			border-color:  #ff0 transparent transparent;
		}

		.div::after{
			content: '';
			width: 0;
			height: 0;
			border: 20px solid;
			position: absolute;
			bottom: -36px;
			left: 140px;
			border-color:  #fff transparent transparent;
		}

.div{
			width: 200px;
			height: 100px;
			border: 2px  solid #ff0;
			border-radius: 7px;  /*圆角弧度为7px*/
			position: relative;
		}