用css绘制图形
巧用css的border-radius属性，也能绘制出好看的图形
html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用css创建图形</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div class="rectangle"></div>
<div class="sanjia"></div>
<div class="tuoyuan"></div>
<div class="yueliang"></div>
<div class="shuye"></div>
</body>
</html>
css部分
div{
margin: 8px;
}
.rectangle{
width: 250px;
height: 150px;
background: #6DC75F;;
}
/*三角形*/
.sanjia{
border-left: 75px solid transparent;
border-right: 75px solid transparent;
border-bottom: 150px solid #6DC75F;
width: 0;
height: 0;
}
/*椭圆*/
.tuoyuan{
width: 300px;
height: 150px;
background: #6DC75F;
border-radius: 150px/75px;
-webkit-border-radius: 150px/75px;
-moz-border-radius: 150px/75px;
}
/*月亮*/
.yueliang{
width: 150px;
height: 150px;
/*background: #6DC75F;*/
border-radius: 50%;
box-shadow: 15px 15px 0 0 green;
}
/*树叶*/
.shuye{
width: 150px;
height: 150px;
background: #6DC75F;
border-radius: 40px 300px 5px 300px;
}
