css 梯形，三角形 实现原理

html-css024

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和方向来画出自己想要的三角形

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

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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf8">

<title>555</title>

<style type="text/css">

dl dd { width:30pxheight:30pxbackground:#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>

这就是一个梯形

<div style="width:200pxheight:0border-bottom: 100px solid pinkborder-top:0border-right: 100px solid transparentborder-left: 100px solid transparent"></div>