CSS3实现三角形实例：
<!DOCTYPE html>
<html>
<head>
<!--声明当前页面的编码格式 UTF-8（国际编码）gbk(中文简体)-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!--声明当前页面的三要素-->
<title>CSS三角形</title>
<meta name="Keywords" content="关键字">
<meta name="Description" content="描述">
<style type="text/css">
*{margin:0; padding:0;}/*通配符*/
body{ color:#fff;}
div.arrow-up {
width:0px;
height:0px;
border-left:100px solid transparent; /* left arrow slant */
border-right:100px solid transparent; /* right arrow slant */
border-bottom:100px solid red; /* bottom, add background color here */
font-size:0px;
line-height:0px;
}
/* create an arrow that points down */
div.arrow-down {
width:0px;
height:0px;
border-left:100px solid transparent;
border-right:100px solid transparent;
border-top:100px solid blue;
font-size:0px;
line-height:0px;
}
/* create an arrow that points left */
div.arrow-left {
width:0px;
height:0px;
border-bottom:100px solid transparent; /* left arrow slant */
border-top:100px solid transparent; /* right arrow slant */
border-right:100px solid green; /* bottom, add background color here */
font-size:0px;
line-height:0px;
}
/* create an arrow that points right */
div.arrow-right {
width:0px;
height:0px;
border-bottom:100px solid transparent; /* left arrow slant */
border-top:100px solid transparent; /* right arrow slant */
border-left:100px solid yellow; /* bottom, add background color here */
font-size:0px;
line-height:0px;
}
</style>
</head>
<body >
<div>
<div class="arrow-up" onclick="aa()"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>
</div>
</body>
</html>
<script>
function aa(){
location.reload();
}
</script>
本文出自 “wennuanyiran” 博客，请务必保留此出处http://dingzhaoqiang.blog.51cto.com/5601059/1703088
原文：http://dingzhaoqiang.blog.51cto.com/5601059/1703088