html 根据坐标画多边形,28种css3绘制多边形代码分享

本文分享了28种CSS3绘制多边形的代码。在做网页项目中需要使用多边形扇形图形来完成一些功能，第一印象就是使用CSS3来完成。经过查资料发现了transform 的skew()正好合适且且使用方便。

先看一个CSS3绘制多边形扇形的例子：

CSS 画扇形

.sector{

height: 200px;

width: 200px;

overflow:hidden;

transform-origin: 0 100%;

transform: skew(-50deg);

position: relative;

background: #cccccc;

}

.sector:before{

height:inherit;

width: inherit;

position: absolute;

content: "";

border-radius: 0 200px 0 0;

background: #fecb2f;

transform-origin: 0 100%;

transform: skew(50deg);

}

以下是28种CSS3绘制多边形的CSS代码，全部28中代码对应的DIV容器都一样，如下：

div的class记得修改成相应的class名。

1、CSS3绘制正方形

CSS代码如下：

#square {

width: 100px;

height: 100px;

background: red;

}

2、 CSS3绘制长方形

CSS代码如下：#rectangle {

width: 200px;

height: 100px;

background: red;

}

3、 CSS3绘制圆形

CSS代码如下：#circle {

width: 100px;

height: 100px;

background: red;

-moz-border-radius: 50px;

-webkit-border-radius: 50px;

border-radius: 50px;

}

4、 CSS3绘制椭圆

CSS代码如下：#oval {

width: 200px;

height: 100px;

background: red;

-moz-border-radius: 100px / 50px;

-webkit-border-radius: 100px / 50px;

border-radius: 100px / 50px;

}

5、 CSS3绘制上三角

CSS代码如下：#triangle-up {

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 100px solid red;

}

6、 CSS3绘制 下三角

CSS代码如下：#triangle-down {

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-top: 100px solid red;

}

7、 CSS3绘制左三角

CSS代码如下：

#triangle-left {

width: 0;

height: 0;

border-top: 50px solid transparent;

border-right: 100px solid red;

border-bottom: 50px solid transparent;

}

8、 CSS3绘制右三角

CSS代码如下：#triangle-right {

width: 0;

height: 0;

border-top: 50px solid transparent;

border-left: 100px solid red;

border-bottom: 50px solid transparent;

}

9、 CSS3绘制左上三角

CSS代码如下：#triangle-topleft {

width: 0;

height: 0;

border-top: 100px solid red;

border-right: 100px solid transparent;

}

10、 CSS3绘制右上三角

CSS代码如下：

#triangle-topright {

width: 0;

height: 0;

border-top: 100px solid red;

border-left: 100px solid trans