CSS3基础CSS制作等腰三角形,等边三角形和直角三角形

CSS制作等腰三角形,等边三角形和直角三角形

三角形的图案在网页设计中很常见,三角形在视觉上给人一种指向性,类似箭头的功能,为了美观,一般在网页中使用的三角形都是等腰三角形,通过CSS边框属性可以轻松的制作各种三角形,下面简单的说说实现原理:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
div {
 width:60px;height:60px;margin:50px auto;
 border-left:30px solid #66f;
 border-right:30px solid #f00;
 border-top:30px solid #6d3;
 border-bottom:30px solid #f6f;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

这里做了一个小正方形,分别给四边设置了不同颜色的边框,效果是:

CSS六边形1.png

我们将正方形的宽和高都设置为0(即width:0;height:0),效果则变成:

CSS六边形2.png

如果需要一个顶点朝上的三角形,则只需将左,上,右三个方向的边框颜色设置为透明即可,即:

border-left:30px solid transparent;
border-right:30px solid transparent;
border-top:30px solid transparent;
border-bottom:30px solid #f6f;

或者这里不定义上边框,只定义其他三个方向的边框也可以,也就是:

border-left:30px solid transparent;
border-right:30px solid transparent;
border-bottom:30px solid #f6f;

这样就实现了一个顶点向上的三角形,实现其他方向的三角形也是一样的道理:如果需要一个顶点朝A的三角形,需要设置A对应的一边的边框颜色,并将A方向不定义边框或设置为透明,以及其他两个方向的边框颜色设置为透明……

css三角形.png

例如,下面我们来做一个底边宽为160px,高为100px的等腰三角形,其实现方法是:

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

这样就实现了这个等腰三角形,用CSS制作定点向上的等腰三角形时,三角形底边宽度相当于“矩形”左右边框的宽度之和,而三角形的高相当于下边框的宽度。

css制作三角形.png

上述等腰三角形的例子中,如果将“右边框”的定义去掉,即:

div {
 width:0px;height:0px;margin:100px auto;
 border-left:80px solid transparent;
 border-bottom:100px solid #80C080;
}

则可以得到等腰三角形的一半,相当于一个直角在右下角的直角三角形:

直角三角形左.png

同样的如果去掉等腰三角形示例中的“左边框”,即:

div {
 width:0px;height:0px;margin:100px auto;
 border-right:80px solid transparent;
 border-bottom:100px solid #80C080;
}

则可以得到一个直角在左下角的直角三角形:

直角三角形右.png

同样的方法可以得到直角在左上和右上角的直角三角形。


等边三角形是特殊的等腰三角形,它的三条边都相等,顶角为60度,而高是边长的3^(1/2)/2倍,约等于0.866……假设底为160px,则高约为138.56px,因此要做边长为160px的等边三角形,可以这么做:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
div {
 width:0px;height:0px;margin:100px auto;
 border-left:80px solid transparent; 
 border-right:80px solid transparent; 
 border-bottom:138.56px solid #A962CE; /*--三角形的高--*/
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

这样也就实现了一个等边三角形,这里由于三角形的高度是无理数,CSS里只能取近似值。

CSS等边三角形.png

当然也有其他很多方法能实现等边三角形,例如通过CSS的旋转属性,另外还可以通过less等预处理语言实现标准的等边三角形,这个本站以后再做讨论……

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