css实现三角形（转）

最新推荐文章于 2024-01-30 16:02:15 发布

weixin_34269583

最新推荐文章于 2024-01-30 16:02:15 发布

阅读量52

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lianghong/p/8037556.html

本文介绍了一种使用CSS边框属性来绘制三角形的方法。通过将元素的高度和宽度设置为0，并巧妙地利用不同方向上的透明边框，可以创建出各种指向的三角形。这种方法在不同的浏览器中表现一致，但在IE6中需要特殊处理。

css实现三角形

(2012-09-10 14:17:26)

标签：

css实现三角形的原理是：当元素的宽高为0，边框(border)不为0时，四个角边框交界重叠处分45度角平分。即将一个border-color值设置为所需的三角形的颜色，其余三个边设置为背景的样色，然后将height和width设为0。
HTML代码：
<div class="triangle1"></div>
<div class="triangle2"></div>
<div class="triangle3"></div>
<div class="triangle4"></div>
<div class="triangle5"></div>
Css代码：

.triangle1{width:0; height:0; border-color:#F00 #F0F #00F #0F0; border-width:20px;border-style: solid;}
.triangle2{width:0; height:0; border-color:#F00 #F0F #00F #0F0; border-width:20px 20px 20px 0;border-style: solid; margin-top:10px;}
.triangle3{width:0; height:0; border-color:#F00 #F0F #00F #0F0; border-width:20px 20px 0 0;border-style: solid; margin-top:10px;}
.triangle4{width:0; height:0; border-color:red transparent transparent transparent; border-width:20px;border-style: solid; margin-top:10px;}
.triangle5{width:0; height:0; border-color:red transparent transparent transparent; border-width:20px;border-style: solid; margin-top:10px; _border-left-color: white; _border-bottom-color: white; _border-right-color: white;}

.triangle1{width:0; height:0; border-color:red pink blue green; border-width:20px;border-style: solid;}

.triangle2{width:0; height:0; border-color:red pink blue green; border-width:20px 20px 20px 0;border-style: solid; margin-top:10px;}

.triangle3{width:0; height:0; border-color:red pink blue green; border-width:20px 20px 0 0;border-style: solid; margin-top:10px;}

.triangle4{width:0; height:0; border-color:red transparent transparent transparent; border-width:20px;border-style: solid; margin-top:10px;}

.triangle5{width:0; height:0; border-color:red transparent transparent transparent; border-width:20px;border-style: solid; margin-top:10px; _border-left-color: white; _border-bottom-color: white; _border-right-color: white;}

FF/ie7/ie8/chrome/显示如图