CSS画三角形的一种方法
2016-05-07 本文已影响27人
觉不够睡的早班车
先来看一个例子：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>例子</title>
<style>
.fang{
width:40px;
height:40px;
background-color:red;
}
.triangle{
width: 0;
height: 0;
border-top: 40px solid #000000;
border-right: 40px solid #ff0000;
border-left: 40px solid #ff0000;
border-bottom: 40px solid #000000;
}
</style>
</head>
<body>
<div class="fang"></div>
<div class="triangle"></div>
</body>
</html>
效果图：
所以只要把对应方向的颜色改成 “transparent” 就可以了，即透明。
但IE6不支持透明属性，想要画出三角形，只能设置相应方向颜色和背景色相同。
例子：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>例子</title>
<style>
.triangle{
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid #ff0000;
border-bottom: 40px solid transparent;
}
}
</style>
</head>
<body>
<div class="triangle"></div>
</body>
</html>
效果：
