css样式梯形,css实现一边是梯形

如何用CSS3生成直角梯形,原理是什么?

上下左右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: left;margin: 10px;

border-top: 30px red solid;

border-bottom: 30px blue solid;

border-left: 30px yellow solid;

border-right: 30px green solid;

}

#div1{width: 0;height: 0;}

#div2{width: 30px;height: 0;}

#div3{width: 30px;height: 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

css 梯形,三角形 实现原理

首先,我们画一个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和方向来画出自己想要的三角形

css3 如直角(圆角)梯形

.div{

height: 80px;

width: 250px;

background-color: #FFC800;

margin: 50px;

border-radius: 15px;

transform: perspective(20px) rotateX(-1deg) rotateY(-2deg) translateZ(0);

}

border-radius:12px

圆角 为零则为直角

梯形 [元素变形]

transform:

perspective [透视距离]

rotateX [横向.x轴旋转]

rotateY [竖向.Y轴旋转]

translateZ [Z轴移动,可以理解为放大和缩小]

了解这些基本的变形用法,就可以实现 【梯形】,

但复杂一些就没办法了,要用到SVG或Canvas,

如何用css3 transform写出梯形

transfrom这个旋转元素的,无法绘制梯形=-=

可以用选择器来实现梯形,代码如下。

!DOCTYPE html

html

head

meta charset="utf8"

title555/title

style type="text/css"

dl dd { width:30px; height:30px; background:#000;}

dl dd:nth-child(1) { width:30px;}

dl dd:nth-child(2) { width:60px;}

dl dd:nth-child(3) { width:90px;}

dl dd:nth-child(4) { width:120px;}

dl dd:nth-child(5) { width:150px;}

dl dd:nth-child(6) { width:180px;}

dl dd:nth-child(7) { width:210px;}

dl dd:nth-child(8) { width:240px;}

/style

script type="text/JavaScript"

/script

/head

body

dl

dd/dd

dd/dd

dd/dd

dd/dd

dd/dd

dd/dd

dd/dd

dd/dd

/dl

/body

/html

css 半梯形样式

width:0;

height:0;

border:75px solid;

border-top:none;

border-color:#F00;

border-right-color:transparent;


分享名称:css样式梯形,css实现一边是梯形
本文链接:http://myzitong.com/article/dsghooc.html