使用css3绘制出各种几何图形

下面是使用CSS3绘制出各种几何图形的攻略。

1. 利用CSS3的border属性绘制图形

CSS3中的border属性可以设置元素的边框样式，利用它可以绘制出三角形、箭头、矩形等图形。

绘制三角形

通过修改元素的border样式来实现绘制三角形，具体代码如下：

.triangle {
  width: 0px;
  height: 0px;
  border-top: 50px solid red;
  border-right: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 50px solid transparent;
}

该代码会生成一个实心的红色三角形。

绘制矩形

绘制矩形非常简单，只需要设置元素的width和height属性即可。具体代码如下：

.rectangle {
  width: 100px;
  height: 50px;
  background-color: blue;
}

该代码会生成一个宽100px，高50px，背景色为蓝色的矩形。

2. 利用CSS3的transform属性绘制图形

CSS3中的transform属性可以实现元素的旋转、倾斜、缩放等效果，同时也可以用来绘制出圆形、椭圆、星形等图形。

绘制圆形

通过设置元素的border-radius属性为50%即可实现绘制圆形的效果。具体代码如下：

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

该代码会生成一个半径为50px，背景色为黄色的圆形。

绘制五角星

通过设置元素的transform属性以及伪元素::before和::after实现绘制五角星的效果。具体代码如下：

.star {
  width: 0;
  height: 0;
  border: 25px solid transparent;
  border-right: 50px solid red;
  border-top: 0;
  position: relative;
  top: -25px;
  left: -25px;
  transform: rotate(35deg);
}
.star::before,
.star::after {
  content: "";
  width: 0;
  height: 0;
  border: 25px solid transparent;
  border-right: 50px solid red;
  position: absolute;
  top: 0;
  transform: rotate(-70deg);
}
.star::before {
  left: -52px;
}
.star::after {
  left: 52px;
}

该代码会生成一个红色的五角星。

以上就是使用CSS3绘制出各种几何图形的攻略，希望能对你有所帮助。