怎么用CSS实现小三角形效果

前端开发 3445 Views 0 Comments

在众多的网页效果中,都有小三角形效果的应用,能够增加特定应用的美观度,下面就给出一段实例代码,里面介绍了两种实现小三角头效果的方式。

怎么用CSS实现小三角形效果

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <meta name="author" content="http://www.asheep.cn/" />  
  6. <title>纯CSS实现三角形的方法</title>  
  7. <style type="text/css">  
  8. .message-box    
  9. {   
  10.   position:relative;   
  11.   float:left;   
  12.   margin:80px 0 0 100px;   
  13.   width:240px;   
  14.   height:60px;   
  15.   line-height:60px;   
  16.   border:1px solid #000;   
  17.   text-align:center;   
  18.   color:#0C7823;   
  19. }   
  20. .triangle-border    
  21. {   
  22.   position:absolute;   
  23.   left:100px;   
  24.   overflow:hidden;   
  25.   width:0;   
  26.   height:0;   
  27.   border-width:10px;   
  28.   border-style:none dashed solid dashed;   
  29. }   
  30. .tb-border    
  31. {   
  32.   top:-10px;   
  33.   border-color:#000 transparent #000 transparent;   
  34. }   
  35. .tb-background    
  36. {   
  37.   top:-9px;   
  38.   border-color:transparent transparent #fff transparent;   
  39. }   
  40. /*字符*/   
  41. .triangle-character    
  42. {   
  43.   position:absolute;   
  44.   left:100px;   
  45.   overflow:hidden;   
  46.   width:26px;   
  47.   height:26px;   
  48.   font:normal 26px "宋体";   
  49. }   
  50. .tc-background    
  51. {   
  52.   top:-12px;   
  53.   color:#FFF;   
  54. }   
  55. .tc-border    
  56. {   
  57.   top:-13px;   
  58.   color:#000;   
  59. }   
  60. </style>  
  61. </head>  
  62. <body>  
  63. <div class="message-box"> <span> border 属性实现</span>  
  64.   <div class="triangle-border tb-border"></div>  
  65.   <div class="triangle-border tb-background"></div>  
  66. </div>  
  67. <div class="message-box"> <span> ◆ 字符实现</span>  
  68.   <div class="triangle-character tc-border"></div>  
  69.   <div class="triangle-character tc-background"></div>  
  70. </div>  
  71. </body>  
  72. </html>  

另外还有一种三角在项目中比较常用,如下:

怎么用CSS实现小三角形效果

  1. width: 0;  
  2. height: 0;  
  3. border-bottom: 15px solid #f00;  
  4. border-left: 15px solid transparent;  

转载请注明:一只羊博客 » 怎么用CSS实现小三角形效果

分享到:
(0)

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址