[分享]css3怎么画多边形

CSS3是目前前端开发中非常重要的一个技术，它能够实现多种效果。其中，利用CSS3画多边形非常有用、实用，可以实现各种需要的图形，下面就来介绍一下CSS3画多边形。首先要注意的是，要画一个多边形，必须...

CSS3是目前前端开发中非常重要的一个技术，它能够实现多种效果。其中，利用CSS3画多边形非常有用、实用，可以实现各种需要的图形，下面就来介绍一下CSS3画多边形。

首先要注意的是，要画一个多边形，必须知道它的顶角坐标，这样才能正确的绘制图形。下面以正方形、圆形、五边形为例，演示如何用CSS3画多边形。

1.画正方形

.square{
    width: 100px;
    height: 100px;
    background-color: red;
    transform: rotate(45deg);
} 

在CSS中，我们设置了一个正方形的宽高，用背景色填充，然后通过transform: rotate(45deg)函数进行旋转，从而得到一个正方形。

2.画圆形

.circle{
    width: 100px;
    height: 100px;
    background-color: red;
    border-radius: 50%;
} 

在CSS中，我们设置了一个圆形的宽高，用背景色填充，然后通过border-radius: 50%函数设置宽高相等，就可以得到一个圆形。

3.画五边形

.penta{
    width: 0;
    height: 0;
    border-width: 50px 25px 0 25px;
    border-style: solid;
    border-color: transparent transparent #ff0 transparent;
} 

在CSS中，我们设置了一个高为0的正三角形，然后利用border-width、border-style、border-color三个参数设置了五边形的形状与颜色，从而得到一个五边形。

通过上面的方法，我们就可以实现各种多边形的绘制，这些技术可以更好地展现你的web页面。