CSS3笔记 3.用DIV画简单的图-完

接上面,再补充一些简单图形,利用css3的before和after伪类可以,其实最重要的是思想,不要为实现方式纠结,本人的实现方式肯定是很差的。

DEMO只支持IE10+

上网搜了下别人的实现,发现刚刚弄的几个DEMO完全是弱爆了,先抛开效果不说,就说那个爱心,别人只用一个DIV就搞定了,根本不需要什么拼装。这也是得益于CSS的伪类 :before,:after.

这两个伪类以前也用过,经常是需要在前面或后面插入一段文字的时候用到,如果用来绘图就再牛B不过了,一个DIV可以有三个绘制的区域,每个绘制的区域又可以绘制出任意角度的三角,梯形,及其它圆圈等形状,理论上上次说的除了那个匕首图形外,其它的都可以用一个DIV搞定了。这里先看一段再简单不过的代码

    .test{
        color: #ffffff;
        background-color:green;
        width: 60px;
        height: 20px;
        line-height: 20px;
        margin-left: 40px;
        margin-top: 20px;
    }
    .test:before{
        background-color: red;
        width: 20px;
        height: 20px;
        line-height: 20px;
        display: block;
        margin-left: -20px;
        content: "before";
        overflow: hidden;
        position:absolute;
    }
    .test:after{
        background-color:blue;
        width: 40px;
        height: 20px;
        line-height: 20px;
        display: block;
        content: "after";
        overflow: hidden;
        position:absolute;
        margin-left: 60px;
        margin-top: -20px;
    }

结果及原理图如下。:before和:after里面一定得加入position:absolute;这样才能准确定位

OK,了解了原理,就再来几个小DEMO小试牛刀。直接贴代码
还是先把没用的HTML先粘上

<html>
<head>
<meta charset="utf-8" />
<title>css3 simple graph2</title>
</head>
<body>
    <div class="container">
        <div class="show">
            <div class="draw">
                <div class="liujiaoxing"></div>
            </div>
            <div class="text">六角星</div>
        </div>
        <div class="show">
            <div class="draw">
                <div class="jiantou"></div>
            </div>
            <div class="text">箭头</div>
        </div>
        <div class="show">
            <div class="draw">
                <div class="icon"></div>
            </div>
            <div class="text">Icon</div>
        </div>
        <div class="show">
            <div class="draw">
                <div class="shuidi"></div>
            </div>
            <div class="text">水滴</div>
        </div>
    </div>
</body>
</html>

然后是我的主力CSS了

/**
* 先说明一下,本人是在IE上调试,因为更符合CSS3的风格,不用加什么前缀,也懒得多写重复的东西,也好看点。
* 如果在FireFox,Chrome,Opea等浏览器上使用,自行在CSS3的样式名前面加上-webkit-,-moz-,-o-等。
*/
.container{
    width: 800px;
    height: 200px;
    border: 1px solid #000;
    margin: 0 auto;
    border-radius: 20px;
    column-count:4;
    column-gap:0px;
    column-rule:1px outset #000000;
    margin-top: 20px;
}
.container .show{
    width: 200px;
    height: 200px;
    overflow: hidden;
    border-radius: 20px;
}
.container .show .draw{
    width: 200px;
    height: 170px;
    display: inline-block;
    transition:all 2s;
}
.container .show .text{
    width: 200px;
    height: 30px;
    line-height: 28px;
    text-align: center;
}
.draw:hover{
    transform: rotate(360deg);
}
/**
* 一个DIV可以画一个,两个,三个三角形,要是都叠在一起,看到的当然就是一个三角形,但如果第二个三角形刚好旋转个90度什么的,看起来就是六角形了
* 这里的三角形的边不能以白色做背景了,因为会档到,一定要用透明属性border: transparent;
*/
.liujiaoxing {
    margin-left: 35px;
    margin-top: 20px;
    width: 0;
    height: 0;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    border-bottom: 100px solid #B10326;
    position: relative;
}

.liujiaoxing:before {
    width: 0;
    height: 0;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    border-bottom: 100px solid #B10326;
    position: absolute;
    content: &#039;&#039;;
    left: -60px;
    top:30px;
    /**
    * 当然,这里用个反方向的三角形也可以,就免得写旋转的样式了。三个可算定的三角形通过叠加可以搭出的形状很多很多,看到CSS3不是给人看一下而已的,研究的高深了还是不一样。
    */
    transform: rotate(180deg);
}

/**
*箭头也相当简单,就是一条线加一个三角形,没什么技术含量,如果想绘一个看起来有点弯的箭头呢
*/
.jiantou{
    margin-top: 50px;
    margin-left: 50px;
    content:&#039;&#039;;
    width:40px;
    height:40px;
    display:block;
    position:absolute;
    /*
    *弯的话,就只能借用圆角了,目前好想没想到绝对的曲线,方法还是用border,这里给一个透明的区域上加两条边,用两条边再加一个圆角让这条“线”看起来有点幅度。
    */
    border-top-left-radius: 30px;
    border-left:20px solid #B10326;
    border-top: 20px solid #B10326;
}
.jiantou:after{
    content:&#039;&#039;;
    height:0px;
    width:0px;
    position:absolute;
    display:block;
    border-top:25px solid transparent;
    border-left:50px solid #B10326;
    border-bottom: 25px solid transparent;
    border-radius:15px 0 0 15px;
    margin-top:-35px;
    margin-left:40px;
    /**
    *其实发现这个方法也可以用来绘饼图,比上次做的那个要强
    */
}

/**
*发现这个特性特别适合绘ICON,秒杀图片式的古老ICON,这里简单起划一个停止ICON
*/
.icon{
    margin-top: 50px;
    margin-left: 50px;
    height:80px;
    width:80px;
    border-radius:50% 50%;
    background:#B10326;
}
.icon:before, .icon:after{
    content:&#039;&#039;;
    /**
    * 如果是中间有字,一个X就可以搞定的,这里自己画一个
    */
    height:10px;
    width:60px;
    display:block;
    background:#fff;
    border-radius:10px;
    position:absolute;
    margin-top:35px;
    margin-left:10px;
    transform:rotate(-45deg);
}
.icon:after{
    transform:rotate(45deg);
}
/**
*继续画一个水滴效果,看起来很复杂,但把水滴一拆,上面的酷似三角形,下面就是一个半圆,结论就有了,下面是一个整圆,上面的三角形和下面的半圆重合了。
*这里我想在水滴里面写点字,利用伪类里面的content属性,先试试吧
*/
.shuidi{
    height:80px;
    width:60px;
    margin-top: 30px;
    margin-left: 50px;
    display:block;
    position:relative;
}
.shuidi:before{
    content:&#039;X.d&#039;;
    height:60px;
    width:60px;
    display:block;
    position:absolute;
    top:20px;
    left:0px;
    z-index:1;
    line-height:60px;
    background:#B10326;
    border-radius:50% 50%;
    color:#fff;
    text-align:center;
}
.shuidi:after{
    content:&#039;&#039;;
    height:0px;
    width:0px;
    display:block;
    margin-top:3px;
    position:absolute;
    border-bottom: 40px solid #B10326;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
}
/**
* 发现画的太不象了,也懒得调,数学学不好悲剧啊。可能圆小点,三角长点可能看起来就更像了吧,有兴趣可以自已去修复。
* OK,对于使用样式作图,就先研究到这了,大致学了思想后,自己动手画一两个,掌握一些知识就行了,如果想学专业点,就多练习吧。
**/

最后上我威武强大的效果图

cssgraph3