<html>
<head>
<title>巧用css技巧实现三角符号</title>
<style type="text/css">
div{
width:0;
height:0;
border:50px solid transparent;
border-top-color:red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
实现效果如下:
一个长宽都为0的框,它的四边其实是四个三角形。利用此特点,可以把其它三边的颜色都设为无色,以得到不同方向的三角形。关键代码如下:
div{
width:0px;
height:0px;
border:50px solid transparent;
border-top-color:red;
border-bottom-color: yellow;
border-left-color: blue;
border-right-color: green;
}
但当我们把这个框的长宽都不设为0以后,发现图像变成了如下图所示。这样我们也可以得到不同方向的梯形。关键代码如下:
div{
width:50px;
height:50px;
border:50px solid transparent;
border-top-color:red;
border-bottom-color: yellow;
border-left-color: blue;
border-right-color: green;
}