HTML中一些简单常用图形的设计

我们在HTML的设计中有时会用到一些常用的图形，本文就讲解如何利用代码实现一些特殊模型。

三角形

首先我们先设置一个<div>标签，将它的宽度和高度都设置为0，然后我们给他四周的边框都设置上宽度的颜色。

  div{width: 0px;height: 0px;border-top: 100px solid blue;border-left: 100px solid green;border-right: 100px solid yellow;border-bottom: 100px solid red;}

然后我们就可以得到一个由4个三角形组成的正方形。

当我们只需要一个方向上的三角形是，可以将其他方向上的三角形颜色设置为透明(transparent)就可以的到一个三角形。

 div{width: 0px;height: 0px;border-top: 100px solid transparent;border-left: 100px solid transparent;border-right: 100px solid transparent;border-bottom: 100px solid red;}

就得到了底边上的三角形。这个三角形是一个等腰直角三角形，我们可以通过改变相对两边框的边框宽度设计其他的等腰三角形。

  div{width: 0px;height: 0px;border-top: 150px solid blue;border-left: 100px solid green;border-right: 100px solid yellow;border-bottom: 150px solid red;}

这个图形中就出现了等腰钝角、等腰锐角三角形。要想得到单独一个三角形，将其他边上的颜色设置一下就可以了。此方法只能设计等腰三角形。

梯形的设计

梯形的设计与三角形的设计类似，但是设计梯形就要设置<div>的长度和宽度。

 div{width: 100px;height: 100px;border-top: 100px solid blue;border-left: 100px solid green;border-right: 100px solid yellow;border-bottom: 100px solid red;}

到我们给<div>设置宽度和高度之后，会得到下面的图形。

当然这里的梯形也都是等腰梯形。当我们仅需要一个梯形利用上面显示一个三角形的方法就可以做到，这里梯形的上边长与所设置<div>标签的宽高有关，它的样式可以通过改变四个边框的边框宽度来设置。

圆形

圆形的设计相对简单一些，我们只需要设置一个<div>标签，给上相同的宽高，再将<div>标签的弯曲度设置成50%就可以得到一个圆形。

     div{width: 200px;height: 200px;background-color: red;border-radius: 50%;}

这样我们就得到了一个圆形。我们还可以给他们设置不同的宽高来得到一个类似椭圆的图形。

  div{width: 400px;height: 200px;background-color: red;border-radius: 50%;}

总结

通过以上方法我们可以获得三角形、梯形、圆形的图案，我们做出来的这些图案都有一定的缺点，我们只能做出等腰梯形和等腰三角形。