CSS绘制图形：矩形、圆形、三角形、多边形

本文主要介绍了CSS绘制图形的方法，包括矩形、圆形、三角形、多边形的绘制方法，以函数、函数细节用法参数讲解同时附带对应的代码案例。


一、矩形的绘制


在CSS中，矩形可以通过设置元素的width、height和background-color属性来实现。

1
2
3
4
5
div{
    width: 100px;
    height: 50px;
    background-color: #f00;
}

如果需要绘制圆角矩形，可以使用border-radius属性。例如：

1
2
3
4
5
6
div{
    width: 100px;
    height: 50px;
    background-color: #f00;
    border-radius: 10px;
}

二、圆形的绘制


在CSS中，圆形可以通过设置元素的width、height、border-radius和background-color属性来实现。

1
2
3
4
5
6
div{
    width: 50px;
    height: 50px;
    background-color: #f00;
    border-radius: 50%;
}

三、三角形的绘制


在CSS中，可以通过设置元素的border属性来实现三角形的绘制。例如：

1
2
3
4
5
6
7
div{
    width: 0;
    height: 0;
    border-width: 50px;
    border-style: solid;
    border-color: #f00 transparent transparent transparent;
}

其中，border-width属性设置了三角形的高度，border-color属性设置了三角形的颜色，同时通过设置其中三个为transparent，来实现三角形的边框。


四、多边形的绘制


在CSS中，可以通过设置元素的border属性来实现多边形的绘制。例如，绘制一个正五边形：

1
2
3
4
5
6
7
8
div{
    width: 0;
    height: 0;
    border-width: 50px;
    border-style: solid;
    border-color: #f00 transparent transparent transparent;
    transform: rotate(36deg);
}

其中，border-width属性设置了多边形的大小，border-color属性设置了多边形的颜色，通过设置transform: rotate(36deg)来实现正五边形的绘制。

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com

猿教程
请先登录后发表评论
  • 最新评论
  • 总共0条评论