效果圖
應(yīng)用場(chǎng)景
一般在模擬對(duì)話框類UI時(shí)使用
實(shí)現(xiàn)思路
- 利用偽類實(shí)現(xiàn)添加小三角
- 用border制作小三角，小三角寬高為0，設(shè)置4個(gè)邊的邊框?qū)挾燃邦伾珌韺?shí)現(xiàn)
- 邊框的實(shí)現(xiàn)是利用兩種顏色的小三角疊加實(shí)現(xiàn)，兩個(gè)三角的位移決定小三角邊框?qū)挾?/li>
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test Page</title>
<link rel="stylesheet" href="style/main.css">
<style>
.dialog{
width: 200px;
height: 100px;
border: 1px solid #ccc;
margin : 50px auto;
position: relative;
}
.triangle:before{
content: '';
border-right: 20px solid #ccc;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 0;
position: absolute;
left: 0;
top: 50%;
margin-left: -20px;
margin-top: -20px;
}
.triangle:after{
content: '';
border-right: 20px solid #fff;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 0;
position: absolute;
left: 0;
top: 50%;
margin-left: -19px;
margin-top: -20px;
}
</style>
</head>
<body>
<div class="dialog triangle">Let's party!</div>
</body>
</html>