好久之前写的东西了,一直没发布出来...
怎么用CSS中的border样式画一个五角星
效果图如下:
其实画一个五角星并不是很难
你只需要了解以下几个知识点:
- 普通流
- 盒模型
- border属性
(三个边的长度怎么设置的?) - 定位(层级关系,方位)
- CSS3旋转
画五角星的第一步:
需要先画出一个三角形,
效果图
所以首先,我们需要明白三角形的构成原理
最常用的方法->通过border来拼一个三角形
怎么拼呢?
思路:
首先明白border边框的四个边,可以分别设置颜色与大小!
明白了这一点就好办了,
那我们如果需要一个朝下的三角形,就可以分别将边框的左右下颜色设置为透明!
我们首先来看一下当不给元素宽高的情况下,用border会绘制出一个什么图型效果:
我们同时给了元素80像素的边框,但给了不同颜色.
那问题来了,
图一
我的需求应该是
图二
所以,怎么将第一张图片的效果--->第二张图片的效果?
那首先,我们需要弄明白黑色区域的宽度是怎么来的.
这就涉及到普通流的排列规则第三条---->块元素默认情况下,继承父元素的宽度.
所以当我们将宽度设置为0时,
就可以图一的效果变为图二中的效果了!
现在需要的是最上面的三角形,
所以将其他(右下左)三个方向的边框颜色边透明就好了.
三角形的写法
border的原理
块元素沿父元素内容区域按普通流排列规则排列
三个三角形定位到一起,其中两个分别顺逆时针方向旋转
网友评论