CSS3基础CSS制作梯形(等腰梯形,直角梯形等)方法步骤

CSS制作梯形(等腰梯形,直角梯形等)方法步骤

在使用CSS制作三角形一文中,简单介绍了三角形的实现方法,通过设置宽高都为0的矩形的边框属性即可完成,而用CSS制作梯形的方式和制作三角形是类似的,不同的只是需要设置矩形宽度或高度值,例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
div {
 width:120px;height:0;margin:100px auto;
 border-left:80px solid transparent;
 border-right:80px solid transparent;
 border-bottom:150px solid #8900CE;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

这里很轻松实现了一个顶点朝上的三角形,下面我们改变“矩形”的宽度值为120px,浏览这个网页就发现梯形图案已经实现了。

CSS梯形.png

这个梯形的下底宽度为矩形“左右边框”的宽度和加上矩形的宽度,上底的宽度等于矩形的宽度,梯形的高度为下边框的宽度

如果把矩形上下左右四个方向的边框颜色都定义出来,会更直观的看出这个梯形的实现方式以及它的尺寸:

CSS梯形尺寸.png

同样的方法,我们可以通过改变矩形不同方向的边框属性来实现上底朝下或朝左右不同方向的矩形,甚至可以只定义其中两边的边框属性来实现直角梯形,例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
div {
 width:120px;height:0;margin:100px auto;
 border-left:80px solid transparent;
 border-top:150px solid #00C1AE;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

这样就实现了一个上底在下方的直角梯形:

CSS直角梯形.png

有没有可能用一个“正立”的梯形和一个“倒立”的梯形上下拼成一个六边形呢?答案是肯定的,例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
.div1 {
 width:160px;height:0;margin:100px auto 0 auto;
 border-left:75px solid transparent;
 border-right:75px solid transparent;
 border-bottom:135px solid #53CC62;
}
.div2 {
 width:160px;height:0;margin:0px auto;
 border-left:75px solid transparent;
 border-right:75px solid transparent;
 border-top:135px solid #53CC62;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>

这样以来,两个div块就拼成了一个六边形:

两个梯形拼成六边形.png

通过改变两个梯形的宽高值,可以改变这个六边形的形状(正六边形的简单实现方法请点这里),有没有可能用两个梯形拼成一个正六边形呢,浏览本文的朋友可以自己试试看,结合等边三角形的做法,应该能给你一些启发……

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/css3/85.html