<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
div {
width: 200px;
height: 100px;
margin: 30px;
background-color: orange;
position: relative;
}
.box1:before {
content: '';
position: absolute;
width: 0;
height: 0;
left: 50%;
top: 100%;
border: solid transparent;
border-width: 30px;
margin-left: -30px;
border-top-color: orange;
}
.box2:before {
content: '';
position: absolute;
width: 60px;
height: 60px;
top: 100%;
left: 50%;
margin-left: -30px;
background: linear-gradient(45deg, transparent 0, transparent 50%, orange 50%, orange 50%, orange 100%) left top / 50% 50% no-repeat,
linear-gradient(315deg, transparent 0, transparent 50%, orange 50%, orange 50%, orange 100%) right top / 50% 50% no-repeat;
}
</style>
<body>
<h3>css指示箭头两种实现方法：</h3>
<h5>1、通过border属性实现（兼容至IE9）, 参考网站：<a href="http://www.cssarrowplease.com/" target="_blank">http://www.cssarrowplease.com/</a></h5>
<div class="box1"></div>
<h5 style="margin-top: 100px;">2、通过background-image属性的线性渐变函数实现（兼容至IE10）</h5>
<div class="box2"></div>
</body>
</html>
