`
txf2004
  • 浏览: 6884757 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

纯CSS制作三角形的方法

 
阅读更多

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

1、通过border 属性来实现

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

border via:www.hujuntao.com

相关代码：

    

  1. 
.angle i{

    2. 

  2. 
	position:absolute;

    3. 

  3. 
	z-index:0;

    4. 

  4. 
	border-style:solid;width:0;height:0;line-height:0; font-size:0;

    5. 

  5. }
    6. 

  6. 
.angle i.left{

    7. 

  7. 
	border-width:20px 20px 20px 0;border-color:transparent #33589F transparent transparent;

    8. 

  8. 
	_border-color:tomato #33589F tomato tomato; /*For IE6-*/ 

    9. 

  9. 
   _filter:chroma(color=tomato);/*For IE6-*/

    10. 

  10. 
   left:-20px;

    11. 

  11. 
   top:15px;

    12. 

  12. }
    13. 

  13. 
.angle i.right{

    14. 

  14. 
	border-width:20px 0 20px 20px;border-color:transparent  transparent  transparent #33589F;

    15. 

  15. 
	_border-color:tomato tomato tomato #33589F; /*For IE6-*/ 

    16. 

  16. 
   _filter:chroma(color=tomato);/*For IE6-*/

    17. 

  17. 
   right:-20px;

    18. 

  18. 
   top:15px;

    19. 

  19. }
    20. 

  20. 
.angle i.top{

    21. 

  21. 
	border-width:0 20px 20px 20px;border-color:transparent  transparent #33589F transparent;

    22. 

  22. 
	_border-color:tomato tomato #33589F tomato; /*For IE6-*/ 

    23. 

  23. 
   _filter:chroma(color=tomato);/*For IE6-*/

    24. 

  24. 
   left:100px;

    25. 

  25. 
   top:-20px;

    26. 

  26. }
    27. 

  27. 
.angle i.bottom{

    28. 

  28. 
	border-width:20px 20px 0 20px;border-color:#33589F transparent  transparent  transparent;

    29. 

  29. 
	_border-color:#33589F tomato tomato tomato ; /*For IE6-*/ 

    30. 

  30. 
   _filter:chroma(color=tomato);/*For IE6-*/

    31. 

  31. 
   left:100px;

    32. 

  32. 
   bottom:-20px;

    33. 

  33. }
    34. 

  34. 
<div class="angle">

    35. 

  35. 
<i class="top"></i>

    36. 

  36. 
<i class="right"></i>

    37. 

  37. 
<i class="bottom"></i>

    38. 

  38. 
<i class="left"></i>

    39. 

  39. 
border via: <a href="http://www.hujuntao.com">www.hujuntao.com</a>

    40. 

  40. 
</div>

    41.

2、transform来实现

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

示例：

transform via:www.hujuntao.com

相关代码：

    

  1. 
.angle b{

    2. 

  2. 
	position:absolute;

    3. 

  3. 
	z-index:0;

    4. 

  4. 
	width:50px;

    5. 

  5. 
	height:50px;

    6. 

  6. 
	background:#33589F;

    7. 

  7. 
	-webkit-transform:rotate(45deg);

    8. 

  8. 
	-moz-transform:rotate(45deg);

    9. 

  9. 
	-ms-transform:rotate(45deg);

    10. 

  10. 
	-o-transform:rotate(45deg);

    11. 

  11. 
	transform:rotate(45deg);

    12. 

  12. 
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=-0.70710678, M21=0.70710678, M22=0.70710678, sizingMethod='auto expand');

    13. 

  13. 
	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=-0.70710678, M21=0.70710678, M22=0.70710678,sizingMethod='auto expand')";

    14. 

  14. }
    15. 

  15. 
.angle b.left{

    16. 

  16. 
	top:15px;

    17. 

  17. 
	left:-10px;

    18. 

  18. }
    19. 

  19. 
.angle b.right{

    20. 

  20. 
	top:15px;

    21. 

  21. 
	right:-10px;

    22. 

  22. }
    23. 

  23. 
.angle b.top{

    24. 

  24. 
	top:-10px;

    25. 

  25. 
	left:100px;

    26. 

  26. }
    27. 

  27. 
.angle b.bottom{

    28. 

  28. 
	bottom:-10px;

    29. 

  29. 
	left:100px;

    30. 

  30. }
    31. 

  31. 
<div class="angle">

    32. 

  32. 
<b class="top"></b>

    33. 

  33. 
<b class="right"></b>

    34. 

  34. 
<b class="bottom"></b>

    35. 

  35. 
<b class="left"></b>

    36. 

  36. 
transform via: <a href="http://www.hujuntao.com">www.hujuntao.com</a>

    37. 

  37. 
</div>

    38.

3、字符来实现

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

示例：

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

相关代码：

    

  1. 
.angle em{

    2. 

  2. 
	font-style:normal;

    3. 

  3. 
	color:#33589F;

    4. 

  4. 
	font-size:50px;

    5. 

  5. 
	width:0;

    6. 

  6. 
	height:0;

    7. 

  7. 
	line-height:50px;

    8. 

  8. 
	text-align:center;

    9. 

  9. 
	position:absolute;

    10. 

  10. 
	vertical-align:middle;

    11. 

  11. }
    12. 

  12. 
.angle em.left{

    13. 

  13. 
	top:15px;

    14. 

  14. 
	left:-25px;

    15. 

  15. }
    16. 

  16. 
.angle em.right{

    17. 

  17. 
	top:15px;

    18. 

  18. 
	right:25px;

    19. 

  19. 
	_right:-25px;

    20. 

  20. }
    21. 

  21. 
.angle em.top{

    22. 

  22. 
	top:-25px;

    23. 

  23. 
	left:100px;

    24. 

  24. }
    25. 

  25. 
.angle em.bottom{

    26. 

  26. 
	bottom:25px;

    27. 

  27. 
	_bottom:-25px;

    28. 

  28. 
	left:100px;

    29. 

  29. }
    30. 

  30. 
<div class="angle">

    31. 

  31. 
<em class="top">◆</em>

    32. 

  32. 
<em class="right">◆</em>

    33. 

  33. 
<em class="bottom">◆</em>

    34. 

  34. 
<em class="left">◆</em>

    35. 

  35. 
◆ via: <a href="http://www.hujuntao.com">www.hujuntao.com</a>

    36. 

  36. 
</div>

    37.

4、线性三角形的实现

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

示例：

border via:www.hujuntao.com

相关代码：

    

  1. 
.border em{

    2. 

  2. 
	position:absolute;

    3. 

  3. 
	z-index:0;

    4. 

  4. 
	border-style:solid;width:0;height:0;line-height:0; font-size:0;

    5. 

  5. }
    6. 

  6. 
.border em.left{

    7. 

  7. 
	border-width:20px 20px 20px 0;border-color:transparent #33589F transparent transparent;

    8. 

  8. 
	_border-color:tomato #33589F tomato tomato; /*For IE6-*/ 

    9. 

  9. 
   _filter:chroma(color=tomato);/*For IE6-*/

    10. 

  10. 
   left:-20px;

    11. 

  11. 
   top:15px;

    12. 

  12. }
    13. 

  13. 
.border em.left em{

    14. 

  14. 
	border-width:20px 20px 20px 0;border-color:transparent #FFF transparent transparent;

    15. 

  15. 
	_border-color:tomato #FFF tomato tomato; /*For IE6-*/ 

    16. 

  16. 
   _filter:chroma(color=tomato);/*For IE6-*/

    17. 

  17. 
   left:3px;

    18. 

  18. 
   top:-20px;

    19. 

  19. }
    20. 

  20. 
.border em.right{

    21. 

  21. 
	border-width:20px 0 20px 20px;border-color:transparent  transparent  transparent #33589F;

    22. 

  22. 
	_border-color:tomato tomato tomato #33589F; /*For IE6-*/ 

    23. 

  23. 
   _filter:chroma(color=tomato);/*For IE6-*/

    24. 

  24. 
   right:-20px;

    25. 

  25. 
   top:15px;

    26. 

  26. }
    27. 

  27. 
.border em.right em{

    28. 

  28. 
	border-width:20px 0 20px 20px;border-color:transparent  transparent  transparent #FFF;

    29. 

  29. 
	_border-color:tomato tomato tomato #FFF; /*For IE6-*/ 

    30. 

  30. 
   _filter:chroma(color=tomato);/*For IE6-*/

    31. 

  31. 
   right:3px;

    32. 

  32. 
   top:-20px;

    33. 

  33. }
    34. 

  34. 
.border em.top{

    35. 

  35. 
	border-width:0 20px 20px 20px;border-color:transparent  transparent #33589F transparent;

    36. 

  36. 
	_border-color:tomato tomato #33589F tomato; /*For IE6-*/ 

    37. 

  37. 
   _filter:chroma(color=tomato);/*For IE6-*/

    38. 

  38. 
   left:100px;

    39. 

  39. 
   top:-20px;

    40. 

  40. }
    41. 

  41. 
.border em.top em{

    42. 

  42. 
	border-width:0 20px 20px 20px;border-color:transparent  transparent #FFF transparent;

    43. 

  43. 
	_border-color:tomato tomato #FFF tomato; /*For IE6-*/ 

    44. 

  44. 
   _filter:chroma(color=tomato);/*For IE6-*/

    45. 

  45. 
   left:-20px;

    46. 

  46. 
   top:3px;

    47. 

  47. }
    48. 

  48. 
.border em.bottom{

    49. 

  49. 
	border-width:20px 20px 0 20px;border-color:#33589F transparent  transparent  transparent;

    50. 

  50. 
	_border-color:#33589F tomato tomato tomato ; /*For IE6-*/ 

    51. 

  51. 
   _filter:chroma(color=tomato);/*For IE6-*/

    52. 

  52. 
   left:100px;

    53. 

  53. 
   bottom:-20px;

    54. 

  54. }
    55. 

  55. 
.border em.bottom em{

    56. 

  56. 
	border-width:20px 20px 0 20px;border-color:#FFF transparent  transparent  transparent;

    57. 

  57. 
	_border-color:#FFF tomato tomato tomato ; /*For IE6-*/ 

    58. 

  58. 
   _filter:chroma(color=tomato);/*For IE6-*/

    59. 

  59. 
   left:-20px;

    60. 

  60. 
   bottom:3px;

    61. 

  61. }
    62. 

  62. 
<div class="border">

    63. 

  63. 
<em class="top"><em></em></em>

    64. 

  64. 
<em class="right"><em></em></em>

    65. 

  65. 
<em class="bottom"><em></em></em>

    66. 

  66. 
<em class="left"><em></em></em>

    67. 

  67. 
border via: <a href="http://www.hujuntao.com">www.hujuntao.com</a>

    68. 

  68. 
</div>

    69.

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

分享到：
| Nokia同意放人 移交125名Qt核心成员给Di ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    用CSS制作三角形分步解释

    用CSS制作三角形，三角形可以用于制作折角效果、阴影效果

    纯CSS3三角形纸屑发光闪烁特效

    纯CSS3三角形纸屑发光闪烁特效是一款纯css3 animation属性制作的金色密集三角形纸屑发光闪烁动画特效。

    纯css制作带三角的边框(附效果图)

    通过特殊字符，利用 css 中的 margin 或者 position 方法完全可以实现以上效果。 复制代码代码如下:&lt;!DOCTYPE HTML&gt;&lt;html lang=”en-US”&gt;&lt;head&gt; &lt;meta charset=”UTF-8″&gt; &lt;title&gt;字符...

    纯CSS绘制三角形箭头图案技术解析

    使用纯CSS，你只需要很少的代码就可以创作出各种浏览器都兼容的三角形箭头！ CSS代码 CSS Code复制内容到剪贴板 /* create an arrow that points up */  div.arrow-up { width: 0; 

    纯CSS制作各种各样的网页图标（三角形、暂停按钮、下载箭头、加号等）

    主要介绍了纯CSS制作各种各样的网页图标（三角形、暂停按钮、下载箭头、加号等）的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

    CSS制作箭头图标代码(圆，三角形，椭圆)

    css3功能非常强大，之前需要图片完成的icon，现在我们只需要几段css代码就可以实现此功能。下面给大家分享纯css制作的圆，椭圆，三角形箭头图标，非常使用，需要的朋友参考下吧

    JS+CSS实现一个气泡提示框

    气泡提示框牵扯到的技术有：JS响应鼠标的事件、纯CSS制作三角形，附截图及示例代码，感兴趣的朋友可以参考下

    纯 Css 绘制扇形的方法示例

    当然你可以拥抱 Svg…在此分享如何纯 Css 打造圆环进度条，只需三步！ 此物乃 2 + 1 夹心饼干，蓝绿色部分为果酱。显而易见饼干为两个削成了圆形的 div，我们重点演示果酱是怎么制作的： 如图所示，大扇形由 6 个...

    一波CSS制作的三角形和圆形小按钮示例

    参考了天猫、微博等网站的做法，用纯html和css实现，效果还是不错的。以下是成果，兼容主流浏览器，包括ie6。 CSS Code复制内容到剪贴板 &lt;!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN ...

    CSS三角箭头应用实践

    用CSS来制作无图片带箭头的DIV方框（此代码比较适合追求纯代码者）这类效果也可以用图片背景来实现，代码会更简洁CSS代码： CSS Code复制内容到剪贴板 div.container{position:absolute;  top:30px;  left:40px...

    金色纸屑发光闪烁ui动画特效

    纯css3 animation属性制作金色密集的三角形纸屑发光闪烁动画特效。

Magicbox
Global site tag (gtag.js) - Google Analytics