一. 三角形的制作
这里采用的方法是利用border的上下左右边框的收缩.
html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>triangle</title>
</head>
<body>
<div class = 'triangle'>
</div>
</body>
</html>
css部分
.triangle{
height:20px;
width:20px;
border-top:10px solid grey;
border-right:10px solid pink;
border-bottom:10px solid blue;
border-left:10px solid yellowgreen ;
}
此时达到的效果如下
.triangle{
height:0px;
width:0px;
border-top:10px solid yellowgreen;
border-right:10px solid transparent;
border-bottom:10px solid transparent;
border-left:10px solid yellowgreen;
}
大功告成
