文章来自LearnShare,转载请注明。
三角形及各种组合图形是web前端经常用到的图形,利用css2的边框属性即可制作多种三角形,大大减少了设计师和前端的工作量。
边看 demo,边解释一下原理:
使用四种颜色的边框
HTML代码:
<!--
* Widget: HUI.ToolTips.CSSTriangle.demo
* Version: 0.1 V (@2012-12-13)
* Author: H-Labs (LearnShare)
-->
<!DOCTYPE html>
<html>
<head>
<title>CSSTriangle demo</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="./style/main.css" />
</head>
<body>
<h2>triangles in css2[demo]</h2>
<div class="triangle" id="t0"></div>
</body>
</html>
CSS代码:
/**
* Widget: HUI.ToolTips.CSSTriangle.demo
* Version: 0.1 V (@2012-12-13)
* Author: H-Labs (LearnShare)
*/
body{
margin:0px;
background-color:#EEF;
}
.triangle{
width:0px;
height:0px;
margin-top:30px;
margin-left:20px;
border:solid 40px #333;
float:left;
}
#t0{
border-top-color:#FFF;
border-right-color:#000;
border-bottom-color:#555;
border-left-color:#AAA;
}
代码解析:
首先定义了:<div class="triangle" id="t0"></div>
设定宽度和高度均为0:
.triangle{
width:0px;
height:0px;
}
然后定义40像素宽的边框,颜色为 #333:
.triangle{
border:solid 40px #333;
}
最后分别设定了四个边框的颜色:
#t0{
border-top-color:#FFF;
border-right-color:#000;
border-bottom-color:#555;
border-left-color:#AAA;
}
demo就这么简单。
最终的效果:CSSTriangle
效果图:
文章来自LearnShare,转载请注明。