首页 > 代码库 > css绘制各种图形,三角形,长方形,梯形
css绘制各种图形,三角形,长方形,梯形
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
.wraper {
position: relative;
float: left;
width: 150px;
height: 150px;
border: 1px solid black;
padding: 10px;
margin: 10px;
}
.wraper div {
height: 0px;
}
.d1 {
width: 1px;
margin: 0 auto;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid;
color: red;
}
.d2 {
width: 50px;
margin: 0 auto;
border-bottom: 100px solid;
color: orange;
}
.d3 {
width: 50px;
margin: 0 auto;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 100px solid;
color: blue;
}
.d4 {
width: 1px;
margin: 0 auto;
border-left: 50px solid transparent;
border-bottom: 100px solid;
color: green;
}
.d5 {
width: 1px;
margin: 0 auto;
border-right: 50px solid transparent;
border-bottom: 100px solid;
color: gray;
}
</style>
</head>
<body>
<div class="wraper">
<div class="d1"></div>
</div>
<div class="wraper">
<div class="d2"></div>
</div>
<div class="wraper">
<div class="d3"></div>
</div>
<div class="wraper">
<div class="d4"></div>
</div>
<div class="wraper">
<div class="d5"></div>
</div>
</body>
</html>
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
.wraper {
position: relative;
float: left;
width: 150px;
height: 150px;
border: 1px solid black;
padding: 10px;
margin: 10px;
}
.wraper div {
height: 0px;
}
.d1 {
width: 1px;
margin: 0 auto;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid;
color: red;
}
.d2 {
width: 50px;
margin: 0 auto;
border-bottom: 100px solid;
color: orange;
}
.d3 {
width: 50px;
margin: 0 auto;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 100px solid;
color: blue;
}
.d4 {
width: 1px;
margin: 0 auto;
border-left: 50px solid transparent;
border-bottom: 100px solid;
color: green;
}
.d5 {
width: 1px;
margin: 0 auto;
border-right: 50px solid transparent;
border-bottom: 100px solid;
color: gray;
}
</style>
</head>
<body>
<div class="wraper">
<div class="d1"></div>
</div>
<div class="wraper">
<div class="d2"></div>
</div>
<div class="wraper">
<div class="d3"></div>
</div>
<div class="wraper">
<div class="d4"></div>
</div>
<div class="wraper">
<div class="d5"></div>
</div>
</body>
</html>
css绘制各种图形,三角形,长方形,梯形
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。