css3如何快速生成

html-css032

css3如何快速生成,第1张

这个一般用画布做，然后用一个二维数组来排列， 类似一个像素盘，用0和1代表是否填充，比如数字0的数组就是 [[1,1,1,1,1], [1,0,0,0,1], [1,0,0,0,1], [1,1,1,1,1]] 这样渲染以后就是一个长方形，文字类似....

上下左右4条边，最关键的一点：每两条边的相交处是斜线的相交的。

如果不渲染成斜线，那么写浏览器内核解析css的程序员要纠结了：上边该压着左边线还是右边线，谁压谁都不合理啊，最简单的是弄成斜线等分，还不必去写判断谁该压着谁的程序代码。

于是，就给用边框创造梯形、三角形留下了空间，其他三条边颜色设置为透明或none，剩下的就是梯形或三角了，至于直角梯形，第6个div是，观察第4个div的 none 起了什么作用，再看div6，相信你就明白了。上图的代码：

<div id="div1">1</div>

<div id="div2">2</div>

<div id="div3">3</div>

<div id="div4">4</div>

<div id="div5">5</div>

<div id="div6">6</div>

<style>

div{

    float: leftmargin: 10px

    border-top: 30px red solid

    border-bottom: 30px blue solid

    border-left: 30px yellow solid

    border-right: 30px green solid

}

#div1{width: 0height: 0}

#div2{width: 30pxheight: 0}

#div3{width: 30pxheight: 30px}

#div4{

    width: 30px

    border-top: none

}

#div5{

    border-top: transparent 30px solid

    border-bottom: 30px blue solid

    border-left: transparent 30px solid

    border-right: transparent 30px solid

}

#div6{

    width: 50px height: 0

    border-top: none

    border-bottom: 40px blue solid

    border-left: transparent 30px solid

    border-right: none

}

</style>