每次写博客之前的随言碎语: emm,利用css来进行绘制一些图形。是无意中发现的一个小操作~然后就研究啦一下啦,然后现在把画的图贴上来,下次再更新一些,因为又发现了一些。hahhaha:)
一、 利用css画图主要思想
真正用来画图的属性不多,主要是border的一些属性,伪元素盒子的使用以及定位的使用。最最最最主要的是思想!!!!也就是怎么去画!!怎么去量化一个图片,只要化简好图片之后,一切都好说啦,接下去画一个图之前都简单记录一下思路~
二 、画图开始
- border属性的引入
先从最简单的属性开始吧~
(1)在不设置width以及height的情况下,利用border来绘制一个正方形,这里是因为border也是具有宽度的,宽高的数值分别是由左右与上下来控制的。具体代码如下:(只是用了一个简单的div盒子来进行绘制)
宽=border-left+border+right;高=border-top+border+bottom;
.box {
width: 0;
height: 0;
border:100px solid #339933;
}
代码结果:
- 简单三角形
先将四条边的
颜色设置为不相同的,就知道三角形怎么画~
具体代码如下:
.box{
width: 0;
height: 0;
border-width:100px;
border-style:solid;
border-color:#ffcccc black #996699 #339933;
}
代码结果:
看到这个是不是就会画三角形勒,只要把其余不想存在的颜色,设置为transparent属性就可以啦
(3)倒三角形
可以根据(2)的方法来画,也可以使用transform属性来旋转角度。代码与上相似,就不贴啦,贴图就好啦~
(4)圆弧绘制
圆弧的绘制与三角形的绘制十分相似,只需要使用border-radius就可以了。因为就是弧度啊~
具体代码:
.radiu {
width: 0;
height: 0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-top:50px solid red;
border-radius:50%;
}
代码结果:
(5)梯形绘制
梯形的绘制,主要是知道,边框与边框之间的结合处是一个角平分线,也就是会形成一个三角形。就可以理解啦。也就是把左右两边的颜色设置为透明度,然后由宽度撑开,如果没有宽度,就是一个三角形的形状。
具体代码:
.ti{
width: 50px;
/* 有宽度就撑开 否则就两条边相连 */
height: 0;
/* div是块级元素 否则默认屏幕宽度 */
border-right:50px solid transparent;
border-left:50px solid transparent;
/* 两线交接处是一个角平分线 也就是三角形 */
border-bottom:50px solid red;
}
代码结果:
(6)五边形:
五边形,其实就是一个梯形与三角形的拼接,并且利用到伪元素,这样就不需要额外添加盒子了。便于理解,于是用了两个随便的颜色。
具体代码:
.up {
position:relative;
width: 100px;
/*height: 10px;*/
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:110px solid #996699;
margin:100px auto;
transform: rotate(180deg);
}
.up::before{
content:'';
position:absolute;
top:110px;
left:-50px;
/*width:100px;*/
/*height:100px;*/
border-left:100px solid transparent;
border-right:100px solid transparent;
border-bottom:100px solid transparent;
border-top:60px solid pink;
/*background-color: pink;*/
/*可以简写
border-color:one two three four ; 与顺时针一样的四个值 对应位置 三个参数也一样
*/
}
代码结果:
(7)箭头的绘制
箭头的绘制,就是利用两个伪元素after和before,两个进行叠加显示。相互错开一个单位。
具体代码:
.left{
position:absolute;
top:50px;
}
.left::before,.left::after{
/* 注意留下的是哪个边框 然后进行定位移动 */
position:absolute;
content:'';
border-top:10px transparent dashed;
border-left:10px transparent dashed;
border-bottom:10px transparent dashed;
border-right:10px #fff dashed;
}
.left::before{
border-right:10px #0099cc solid ;
}
.left::after{
border-right:10px #fff solid;
/* 移动覆盖 */
left:1px;
}
代码结果:
emmm,还有二,来不及,明天更~