<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用after僞元素實現微信對話框圖形</title>
<style>
div
{
width: 300px;
height: 90px;
background: blue;
margin:60px auto;
border-radius: 20px;
}
div:hover:after
{
content:"";
display:inline-block;
width: 0px;
height: 0px;
border:15px solid transparent;
border-left:15px solid blue;
position:relative;
left:300px;
bottom:-25px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>