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

本文将介绍如何使用CSS绘制矩形、圆形、三角形、多边形等图形，并提供相应的函数、参数、代码案例。

1. 绘制矩形

使用CSS的border属性可以轻松绘制矩形，border属性包括border-width、border-style、border-color三个属性，分别用于设置边框宽度、边框样式和边框颜色。

.rectangle {
  width: 100px;
  height: 50px;
  border: 2px solid red;
}

以上代码将绘制一个宽100px、高50px的红色边框矩形。

2. 绘制圆形

使用CSS的border-radius属性可以轻松绘制圆形，border-radius属性用于设置边框圆角的弧度，当设置的值等于元素宽度的一半时，即可绘制出圆形。

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

以上代码将绘制一个宽高均为100px的蓝色圆形。

3. 绘制三角形

使用CSS的border属性可以绘制三角形，具体实现方式是将元素的宽度和高度设为0，然后设置对应的边框宽度和颜色，最后将三角形对应的边框设置为透明。

.triangle {
  width: 0;
  height: 0;
  border-width: 50px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}

以上代码将绘制一个红色三角形。

4. 绘制多边形

使用CSS的clip-path属性可以绘制多边形，clip-path属性用于设置剪切路径，可以使用polygon()函数定义多边形的顶点坐标。

.polygon {
  width: 200px;
  height: 200px;
  background-color: green;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 50%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 100%);
}

以上代码将绘制一个绿色的四边形。

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

• 上一篇： CSS字体样式：字体族、字号、字重、斜体
• 下一篇： CSS透明度与渐变：rgba、opacity、渐变背景