用CSS3绘制三角形的简单方法

网络
乐观主义者从每一个灾难中看到机遇，而悲观主义都从每一个机遇中看到灾难。无论有多困难，都坚强地抬头挺胸，人生是一场醒悟，不要昨日，不要明天，只要今日。

利用CSS的border以及它的属性值transparent来实现三角形,其中最主要的是要明白由于div的高度跟宽度都为0，margin，padding也为0，所以元素框的大小就是他的border的叠加，由于相邻boder会重叠，故存在内容宽高时其实任意一边存在的border都是梯形的，当div内容宽高为0时，border就表现为三角形，将四个border的颜色设置为transparent表示边框透明，而将右边框颜色再设置为红色就发现三角形出现了，其实这个三角形是右边框。

CSS Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <html>
  3. <body>
  4. <style>
  5. #triangle-up{
  6. width:0px;
  7. height:0px;
  8. border:100pxsolidtransparent;
  9. border-right:100pxsolidred;
  10. }
  11. </style>
  12. <divid="triangle-up"></div>
  13. </body>
  14. </html>

图解

正常的框模型，div的内容width以及height均为50px.黑线划出来的区域就是它的右边框，呈现为一个梯形

CSS Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <html>
  3. <body>
  4. <style>
  5. #triangle-up{
  6. width:50px;
  7. height:50px;
  8. border:100pxsolidred;
  9. border-bottom:100pxsolidred;
  10. }
  11. </style>
  12. <divid="triangle-up"></div>
  13. </body>
  14. </html>

当div的内容width以及height均为0.黑线划出来的区域就是它的右边框，呈现为一个三角形

CSS Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <html>
  3. <body>
  4. <style>
  5. #triangle-up{
  6. width:0px;
  7. height:0px;
  8. border:100pxsolidred;
  9. }
  10. </style>
  11. <divid="triangle-up"></div>
  12. </body>
  13. </html>

当div的内容width以及height均为0.上下左边框都为透明的时候，只有右边框显示为红色，三角形就看到了

CSS Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <html>
  3. <body>
  4. <style>
  5. #triangle-up{
  6. width:0px;
  7. height:0px;
  8. border:100pxsolidtransparent;
  9. border-right:100pxsolidred;
  10. }
  11. </style>
  12. <divid="triangle-up"></div>
  13. </body>
  14. </html>

结合css其他特性定能做出更有趣的一些效果！

本文用CSS3绘制三角形的简单方法到此结束。一个成熟的人握住自已快乐的钥匙，他不期待别人使他快乐，反而能将幸神福与快乐带给别人。小编再次感谢大家对我们的支持！