<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title
</title>
<style>
.arrow{
border: 30px solid transparent;
border-top:30px solid #396bb3;
display: inline-block;
}
.arrow:hover{
border: 30px solid transparent;
border-bottom:30px solid #000000;
margin-top: -15px;
}
</style>
</head>
<body>
<div class="arrow">
</div>
</body>
</html>
转载于:https://www.cnblogs.com/ezway/p/6949947.html
相关资源：详解CSS3 用border写 空心三角箭头 (两种写法)
