如何用css3绘制梯形梯形

html-css016

如何用css3绘制梯形梯形,第1张

这就是一个梯形

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

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>