如何做一些图形以及做一个流星雨的页面

 （作者：张滋，撰写时间：2019年1月25日）

                                                                               如何做一个三角形

用css制作一个三角形，关键是border-color属性来取决于三角形的方向。我在这用position定位是为了更能看到三角形的效果，也可以不要。

最终效果：

                                                                              如何做一个流星雨的页面

1.首先，我们来做一个流星雨代码，我们要实现一个星星的形状，给一个div再写样式。

这样就做出一个白色的小圆点，并且给它一个阴影部分，这样便完成了一个小圆点光晕部分。

效果如下：

下面我们接着完成它的尾部轨迹，这是我们就要用到一个新内容伪元素“:after”,这个伪元素可以在元素的内容之后插入新内容。还有content属性与:after 伪元素配合使用，来插入生成内容（必不可少），如果少了就不起效果。

效果如下：

上面的代码讲述了border-width是为边框指定宽度，而我定义了一个长方形，最后一行border-color是设置边框颜色，而我设置了上边框，右边框，下边框为背景颜色为透明，左边框为白色，这样我们就能把长方形变成一个以左边为底的三角形，然后在把尾部轨迹旋转一个角度，这样就能让它成一个倾斜的效果了。这样我们就把流星做好了，接下来我们给它添加动画。我们都知道流星是有一种淡入淡出的效果。那么我们来了解一下定义透明效果的属性opacity,它的值。属性能够设置的值0.0到1.0，值越小，越透明。

                                                                          如何做一个五角星

我们要了解一下既然要做一个五角星就要想怎么去做，而我的思路是利用三个三角形来完成一个五角星。如下图：画的不太好，别介意。

首先我们要创建一个三角形，如下图：

效果如下：

然后我们利用：before以及：after这两个伪元素来画两个三角形. “:after”和“：before”,这两个伪元素可以在元素的内容之后插入新内容。还有content属性与:after以及：before 伪元素配合使用，来插入生成内容（必不可少），如果少了就不起效果。伪元素用于向某些选择器设置特殊效果.

首先通过：before伪元素来画第二个三角形，代码如下：

效果如下：

最后再次通过伪元素：after来画最后一个三角形。这样一个完整的五角星就成功了。

效果如下：

如果大家觉得我的五角星不好，你们可以根据自已的需求来调样式。

当然还有很多方法做五角星，这只是其中的一种方法。