郑州网站建设业务咨询热线：
0371-65349913 / 15333818157
0371-65349913 / 15333818157
本网页展示了利用DIV+CSS网页技术制作彩色三角形的效果，包含了我们郑州网站建设公司写出的实例代码。这一效果往往会用在网页上作为菜单指向时的场合，在日常的网站建设中可能会用得到。本实例列出了八种三角形的实现，并出示了下面的图示，各位可以结合下面的源代码及图形显示，来琢磨一下图像为什么会这样显示，各位也可以根据本文中所列举的实例，进一步地修改参数，就可以制作出更多类型的、更加符合要求的三角图形来。在此郑州网站建设就整理了下面的实现代码列在下面，本代码已经在IE和其他浏览器下测试通过，可供建站用户和网站建设技术人员参考。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>利用DIV+CSS网页技术制作彩色三角形</title>
</head>
<style type="text/css">
#triangle-up {
width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-bottom: 100px solid green;
}
#triangle-down {
width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-top: 100px solid green;
}
#triangle-left {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-right: 100px solid green;
border-bottom: 60px solid transparent;
}
#triangle-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-left: 100px solid green;
border-bottom: 60px solid transparent;
}
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid green;
border-right: 100px solid transparent;
}
#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid green;
border-left: 100px solid transparent;
}
#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid green;
border-right: 100px solid transparent;
}
#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid green;
border-left: 100px solid transparent;
}
</style>
<body>
<div id="triangle-up" style="float:left; margin-left:20px;"></div> <!--如图一-->
<div id="triangle-down" style="float:left; margin-left:20px;"></div> <!--如图二-->
<div id="triangle-left" style="float:left; margin-left:20px;"></div> <!--如图三-->
<div id="triangle-right" style="float:left; margin-left:20px;"></div> <!--如图四-->
<div id="triangle-topleft" style="float:left; margin-left:20px;"></div> <!--如图五-->
<div id="triangle-topright" style="float:left; margin-left:20px;"></div> <!--如图六-->
<div id="triangle-bottomleft" style="float:left; margin-left:20px;"></div> <!--如图七-->
<div id="triangle-bottomright" style="float:left; margin-left:20px;"></div> <!--如图八-->
</body>
</html>