Time: 20200131
三角形的繪制
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>三角形</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="triangle"></div>
</body>
</html>
CSS樣式
.triangle {
/* border: 50px solid #ccc; */
border-top: 50px solid transparent;
border-left: 50px solid #f00;
border-bottom: 50px solid transparent;
border-right: 0px solid #00f;
width: 0px;
height: 0px;
margin: 50px auto;
}
對話框的繪制
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="dialog.css">
</head>
<body>
<div class="dialog">
Hello Everybody!
</div>
</body>
</html>
CSS樣式
.dialog {
background-color: #6a6;
width: 300px;
height: 25px;
margin: 50px auto;
line-height: 25px;
padding: 10px;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
-o-border-radius: 6px;
color:#fff;
/* 相對定位 */
position: relative;
}
/* 加三角形 */
/* 使用偽元素 */
/* 向左的三角形，左邊border為0，上下顏色為透明 */
.dialog::before {
content: '';
border-left: 0px solid #6a6;
border-top: 10px solid transparent ;
border-right: 10px solid #6a6;
border-bottom: 10px solid transparent ;
/* 絕對定位 */
position: absolute;
left: -10px;
top: 14px;
}
顯示效果
截屏2020-01-31下午3.46.26.png
END.
