css巧妙利用盒子----画图（一）

每次写博客之前的随言碎语： emm，利用css来进行绘制一些图形。是无意中发现的一个小操作~然后就研究啦一下啦，然后现在把画的图贴上来，下次再更新一些，因为又发现了一些。hahhaha：）

一、 利用css画图主要思想

真正用来画图的属性不多，主要是border的一些属性，伪元素盒子的使用以及定位的使用。最最最最主要的是思想！！！！也就是怎么去画！！怎么去量化一个图片，只要化简好图片之后，一切都好说啦，接下去画一个图之前都简单记录一下思路~

二 、画图开始

1. border属性的引入
   先从最简单的属性开始吧~
   （1）在不设置width以及height的情况下，利用border来绘制一个正方形，这里是因为border也是具有宽度的，宽高的数值分别是由左右与上下来控制的。具体代码如下：（只是用了一个简单的div盒子来进行绘制）
   宽=border-left+border+right；高=border-top+border+bottom；

      .box {
            width: 0;
            height: 0;
            border:100px solid #339933;
            }

代码结果：

2. 简单三角形
   先将四条边的
   颜色设置为不相同的，就知道三角形怎么画~
   具体代码如下：

 .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，还有二，来不及，明天更~