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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。