css 梯形,三角形 实现原理

html-css026

css 梯形,三角形 实现原理,第1张

首先,我们画一个div,给div加上border,看看盒子模型本来的样子

梯形:

由此可见,css绘制的梯形并不是一个容器,只是容器的一条边。css把容器的其余三条边设置为透明的,只显示需要的一条边,就是一个梯形了。

直角梯形

三角形

盒子模型分为两种,一种是border-box,一种是center-box。低版本的ie中是border-box,在新的浏览器中,我们可以把容器的宽高设计为0或者特地设置box-sizing: border-box。

来看看border-box的效果:

由此可见,当设置为border-box时,border的大小包含在容器大小之内,我们可以通过显示某条边来制作三角形

border-box画直角三角形

center-box:

与border-box一样,可以根据控制border的width和方向来画出自己想要的三角形

上下左右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>

用不着css3,不用一句js代码,甚至不要css都行...

1.首先,新建 html 文件

2.用记事本或编辑器打开 html 文件,往 body 区内插入图片<img src="图片地址" />

3.保存 html 文件,用你喜欢的浏览器打开这个网页

4.css 定义 img{border: none} 图片默认的边框很丑,影响效果,先去掉

5.请找到你显示器上有一个进参数设置界面的按钮(应该会有很多按钮,多试试就能找到)

6.按下按钮,里面有个梯形校正选项,可能是英文或类似的名称

7.尝试给梯形校正选项设置一个很大的值

8.如果上面你都做对了,会成功获得一个梯形效果

9.Now enjoy it! Cheers...