css3对话框

时间 2019-11-11
标签 css3 css 对话框栏目 CSS 繁體版
原文原文链接
<!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>