CSS边框属性画一个五角星

好久之前写的东西了,一直没发布出来...

怎么用CSS中的border样式画一个五角星
效果图如下:

其实画一个五角星并不是很难

你只需要了解以下几个知识点:

1. 普通流
2. 盒模型
3. border属性
   (三个边的长度怎么设置的?)
4. 定位(层级关系,方位)
5. CSS3旋转

画五角星的第一步:
需要先画出一个三角形,

一个五角星可以由三个一样大小的等腰三角形旋转而成! 效果图

所以首先,我们需要明白三角形的构成原理
最常用的方法->通过border来拼一个三角形
怎么拼呢?
思路:
首先明白border边框的四个边,可以分别设置颜色与大小!
明白了这一点就好办了,
那我们如果需要一个朝下的三角形,就可以分别将边框的左右下颜色设置为透明!

我们首先来看一下当不给元素宽高的情况下,用border会绘制出一个什么图型效果:
我们同时给了元素80像素的边框,但给了不同颜色.
那问题来了,

图中黑色区域的宽度怎么来的呢? 图一
我的需求应该是 图二

所以,怎么将第一张图片的效果--->第二张图片的效果?
那首先,我们需要弄明白黑色区域的宽度是怎么来的.
这就涉及到普通流的排列规则第三条---->块元素默认情况下,继承父元素的宽度.

所以当我们将宽度设置为0时,
就可以图一的效果变为图二中的效果了!

现在需要的是最上面的三角形,
所以将其他(右下左)三个方向的边框颜色边透明就好了.

三角形的写法

border的原理

块元素沿父元素内容区域按普通流排列规则排列 三个三角形定位到一起,其中两个分别顺逆时针方向旋转