目录
我们先来看这样一个图形，为什么呢？因为绘制梯形、三角形或者平行四边形就是在这个基础上绘制的！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>创建三角形</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 100px;
height: 100px;
border: 100px solid red;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>等腰梯形
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>创建三角形</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 100px;
height: 100px;
border: 100px solid;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
普通三角形（等腰三角形）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实现三角形</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 0px;
height: 0px;
border: 100px solid;
border-top-color: red;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
等边三角形
我们知道等边三角形，高是边长的一半的sqrt(3)倍，所以如果边长的一半为50的话，高度差不多就是86.6，又因为边长的一半就是左边框的厚度，高度就是上边框的厚度，所以等边三角形的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>创建三角形</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 0px;
height: 0px;
border-top: 86.6px solid;
border-left: 50px solid;
border-right: 50px solid;
border-top-color: red;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
平行四边形
解题思路：由创建三角形我们得知这是上边框和右边框，一个平行四边形是不是只要再拿它的中心对称图形就可以了？所以平行四边形的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>创建平行四边形</title>
<style>
*{
margin: 0;
padding: 0;
}
.box1{
width: 0px;
height: 0px;
float: left;
border: 100px solid;
border-top-color: red;
border-right-color: red;
border-bottom-color: transparent;
border-left-color: transparent;
}
.box2{
width: 0px;
height: 0px;
float: left;
border: 100px solid;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: red;
border-left-color: red;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
绘制什么直角梯形之类的，是不是一个道理？