<!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>
转载于:https://my.oschina.net/u/246088/blog/102308