css3对话框

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="style.css" media="all">
  <style type="text/css">
@charset "utf-8";
@import url("http://www.w3cplus.com/demo/css3/base.css");
.page{
    width:500px;
    margin: 20px;
}

/* wen */
.wen{
    background-color:#B6F5FE;
  padding:10px;
  position:relative;
  margin-bottom:20px;
  -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
  width:400px;
}
.wen:before,.wen:after{ 
  content:'';
  width:0;
  height:0;
  position:absolute;
}
.wen:before{
    left:10px;
  bottom:-18px;
  border-top:30px solid #B6F5FE;
  border-left:8px solid transparent;
  border-right:8px solid transparent;
  -webkit-transform:rotate(50deg);
  -moz-transform:rotate(50deg);
  -ms-transform:rotate(50deg);
  -o-transform:rotate(50deg);
  transform:rotate(50deg);
}
/* da */
.da{
    background-color:#DEEA75;
  padding:10px;
  position:relative;
  margin-bottom:20px;
  -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
  width:400px;
  margin-left:90px;
}
.da:before,.da:after{ 
  content:'';
  width:0;
  height:0;
  position:absolute;
}
.da:before{
    left:390px;
  bottom:-18px;
  border-top:30px solid #DEEA75;
  border-left:8px solid transparent;
  border-right:8px solid transparent;
  -webkit-transform:rotate(320deg);
  -moz-transform:rotate(320deg);
  -ms-transform:rotate(320deg);
  -o-transform:rotate(320deg);
  transform:rotate(320deg);
}

  </style>
</head>
<body>
  <div class="page">
    <h1>css3对话框设计,感谢:为之</h1>
    
    <p class="wen">“执子之手,与子偕老”是说爱情的吗?</p>
    <p class="da">
     出自《诗经》“邶风”里的《击鼓》篇,全句是:“死生契阔,与子成说;执子之手,与子偕老”。这话原是歌颂战友之情的,“契阔”的本意是“勤苦”,整段话是两名战友在艰苦漫长的远征环境中相互勉励之词。 
  </p>
  </div>
</body>
</html>

你可能感兴趣的:(css3对话框)