css 3ダイアログ
2023 ワード
<!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>