纯CSS制作三角形的方法

最新推荐文章于 2024-07-22 15:19:55 发布

iteye_3224

最新推荐文章于 2024-07-22 15:19:55 发布

阅读量128

点赞数

文章标签：前端 ViewUI

在前端设计中经常用到三角形图标，如列表、下拉提示、面包屑导航的位置，给用户以导向的引导作用。今天教大家几种纯CSS制作三角形的方法：

1、通过border 属性来实现

最简单也是最实用的方法,将元素的宽带和高度设为0，通过border属性来实现三角形。
优点：简单、可创建不同角度的三角形
缺点：IE6不支持transparent，可以通过chroma滤镜来解决、边会有锯齿
示例：

border via: www.hujuntao.com

相关代码：

.angle i{
position:absolute;
z-index:0;
border-style:solid;width:0;height:0;line-height:0; font-size:0;
}
.angle i.left{
border-width:20px 20px 20px 0;border-color:transparent #33589F transparent transparent;
_border-color:tomato #33589F tomato tomato; /*For IE6-*/
_filter:chroma(color=tomato);/*For IE6-*/
left:-20px;
top:15px;
}
.angle i.right{
border-width:20px 0 20px 20px;border-color:transparent transparent transparent #33589F;
_border-color:tomato tomato tomato #33589F; /*For IE6-*/
_filter:chroma(color=tomato);/*For IE6-*/
right:-20px;
top:15px;
}
.angle i.top{
border-width:0 20px 20px 20px;border-color:transparent transparent #33589F transparent;
_border-color:tomato tomato #33589F tomato; /*For IE6-*/
_filter:chroma(color=tomato);/*For IE6-*/
left:100px;
top:-20px;
}
.angle i.bottom{
border-width:20px 20px 0 20px;border-color:#33589F transparent transparent transparent;
_border-color:#33589F tomato tomato tomato ; /*For IE6-*/
_filter:chroma(color=tomato);/*For IE6-*/
left:100px;
bottom:-20px;
}
<div class="angle">
border via: <a href="http://www.hujuntao.com">www.hujuntao.com</a>
</div>

2、transform来实现

通过旋转块状标签角度的方法获得,这种方法需要支持css3属性transform的浏览器支持.IE可以通过Matrix滤镜来实现。
缺点：不支持创建不同角度的三角形

示例：

transform via: www.hujuntao.com

相关代码：

.angle b{
position:absolute;
z-index:0;
width:50px;
height:50px;
background:#33589F;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=-0.70710678, M21=0.70710678, M22=0.70710678, sizingMethod='auto expand');
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=-0.70710678, M21=0.70710678, M22=0.70710678,sizingMethod='auto expand')";
}
.angle b.left{
top:15px;
left:-10px;
}
.angle b.right{
top:15px;
right:-10px;
}
.angle b.top{
top:-10px;
left:100px;
}
.angle b.bottom{
bottom:-10px;
left:100px;
}
<div class="angle">
transform via: <a href="http://www.hujuntao.com">www.hujuntao.com</a>
</div>

3、字符来实现

通过◆字符实现.实现方法与上面的类似,将字符的颜色设置为和希望表现得容器相同的颜色,从而得到一个视觉上的三角形.只是这次我们没有用到CSS3的transform属性，兼容性更好一些。
缺点：不支持创建不同角度的三角形

示例：

◆◆◆◆◆ via: www.hujuntao.com

相关代码：

.angle em{
font-style:normal;
color:#33589F;
font-size:50px;
width:0;
height:0;
line-height:50px;
text-align:center;
position:absolute;
vertical-align:middle;
}
.angle em.left{
top:15px;
left:-25px;
}
.angle em.right{
top:15px;
right:25px;
_right:-25px;
}
.angle em.top{
top:-25px;
left:100px;
}
.angle em.bottom{
bottom:25px;
_bottom:-25px;
left:100px;
}
<div class="angle">
◆
◆
◆
◆
◆ via: <a href="http://www.hujuntao.com">www.hujuntao.com</a>
</div>

4、线性三角形的实现

我们可以通过border属性，将两个三角型的叠加就可以获得相应的效果：

示例：

border via: www.hujuntao.com

相关代码：

.border em{
position:absolute;
z-index:0;
border-style:solid;width:0;height:0;line-height:0; font-size:0;
}
.border em.left{
border-width:20px 20px 20px 0;border-color:transparent #33589F transparent transparent;
_border-color:tomato #33589F tomato tomato; /*For IE6-*/
_filter:chroma(color=tomato);/*For IE6-*/
left:-20px;
top:15px;
}
.border em.left em{
border-width:20px 20px 20px 0;border-color:transparent #FFF transparent transparent;
_border-color:tomato #FFF tomato tomato; /*For IE6-*/
_filter:chroma(color=tomato);/*For IE6-*/
left:3px;
top:-20px;
}
.border em.right{
border-width:20px 0 20px 20px;border-color:transparent transparent transparent #33589F;
_border-color:tomato tomato tomato #33589F; /*For IE6-*/
_filter:chroma(color=tomato);/*For IE6-*/
right:-20px;
top:15px;
}
.border em.right em{
border-width:20px 0 20px 20px;border-color:transparent transparent transparent #FFF;
_border-color:tomato tomato tomato #FFF; /*For IE6-*/
_filter:chroma(color=tomato);/*For IE6-*/
right:3px;
top:-20px;
}
.border em.top{
border-width:0 20px 20px 20px;border-color:transparent transparent #33589F transparent;
_border-color:tomato tomato #33589F tomato; /*For IE6-*/
_filter:chroma(color=tomato);/*For IE6-*/
left:100px;
top:-20px;
}
.border em.top em{
border-width:0 20px 20px 20px;border-color:transparent transparent #FFF transparent;
_border-color:tomato tomato #FFF tomato; /*For IE6-*/
_filter:chroma(color=tomato);/*For IE6-*/
left:-20px;
top:3px;
}
.border em.bottom{
border-width:20px 20px 0 20px;border-color:#33589F transparent transparent transparent;
_border-color:#33589F tomato tomato tomato ; /*For IE6-*/
_filter:chroma(color=tomato);/*For IE6-*/
left:100px;
bottom:-20px;
}
.border em.bottom em{
border-width:20px 20px 0 20px;border-color:#FFF transparent transparent transparent;
_border-color:#FFF tomato tomato tomato ; /*For IE6-*/
_filter:chroma(color=tomato);/*For IE6-*/
left:-20px;
bottom:3px;
}
<div class="border">
border via: <a href="http://www.hujuntao.com">www.hujuntao.com</a>
</div>

转自：http://www.hujuntao.com/archives/css-make-a-triangle.html

iteye_3224

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
纯CSS制作三角形的方法

在前端设计中经常用到三角形图标，如列表、下拉提示、面包屑导航的位置，给用户以导向的引导作用。今天教大家几种纯CSS制作三角形的方法：1、通过border 属性来实现最简单也是最实用的方法,将元素的宽带和高度设为0，通过border属性来实现三角形。优点：简单、可创建不同角度的三角形缺点：IE6不支持transparent，可以通过chroma滤镜来解决...
复制链接

扫一扫