CSS实现对话框小三角效果
2017-08-08 本文已影响0人
JeremyChi
效果图
应用场景
一般在模拟对话框类UI时使用
实现思路
- 利用伪类实现添加小三角
- 用border制作小三角，小三角宽高为0，设置4个边的边框宽度及颜色来实现
- 边框的实现是利用两种颜色的小三角叠加实现，两个三角的位移决定小三角边框宽度
代码
<!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>
