使用HTML和CSS程式碼製作帶有尖角的氣泡對話方塊
阿新 • • 發佈：2022-04-08
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.dialog_Box{
text-align: center;
}
.dialog{
/* 製作圓角對話方塊 */
border: solid 2px;
border-radius: 6px;
padding: 25px;
display: inline-block;
position: absolute;
font-size: 1.5em;
color: cornflowerblue;
float: right;
width: 192px;
}
/* 製作尖角原理：把容器的長和寬都設定為零，然後利用其border製作小三角，兩個三角形重疊，一個與背景顏色相同，另一個與邊框顏色相同，即可展示出尖角的效果 */
.dialog:before{
content: "";
width: 0;
height: 0;
border-top:32px solid #fff;
border-right: 50px solid;
margin-left: -89px;
margin-top: 26px;
position: absolute;
top: 20px;
}
.dialog:after{
content: "";
position: absolute;
top: 41px;
bottom: 90px;
left: -40px;
border-top: 34px solid transparent;
border-right: 48px solid #fff;
border-bottom: 0 solid transparent;
}
</style>
</head>
<body>
<div class="dialog_Box">
<span class="dialog">我要一個富蘿莉</span>
</div>
</body>
</html>