如何使用CSS如何实现小三角形效果【附实例】

互联网
这篇文章主要为大家介绍了如何使用CSS如何实现小三角形效果【附实例】，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

使用CSS实现小三角形效果【附实例】:

建议:尽可能的手写代码，可以有效的提高学习效率和深度。

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

CSS Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
  5. <metaname="author"content="http://www.softwhy.com/"/>
  6. <title>三种纯CSS实现三角形的方法</title>
  7. <styletype="text/css">
  8. .message-box
  9. {
  10. position:relative;
  11. float:left;
  12. margin:80px00100px;
  13. width:240px;
  14. height:60px;
  15. line-height:60px;
  16. border:1pxsolid#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:nonedashedsoliddashed;
  29. }
  30. .tb-border
  31. {
  32. top:-10px;
  33. border-color:#000transparent#000transparent;
  34. }
  35. .tb-background
  36. {
  37. top:-9px;
  38. border-color:transparenttransparent#ffftransparent;
  39. }
  40. /*字符*/
  41. .triangle-character
  42. {
  43. position:absolute;
  44. left:100px;
  45. overflow:hidden;
  46. width:26px;
  47. height:26px;
  48. font:normal26px"宋体";
  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. <divclass="message-box"><span>border属性实现</span>
  64. <divclass="triangle-bordertb-border"></div>
  65. <divclass="triangle-bordertb-background"></div>
  66. </div>
  67. <divclass="message-box"><span>◆字符实现</span>
  68. <divclass="triangle-charactertc-border">◆</div>
  69. <divclass="triangle-charactertc-background">◆</div>
  70. </div>
  71. </body>
  72. </html>

以上这篇使用CSS实现小三角形效果【附实例】就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

原文地址：http://www.softwhy.com/forum.php?mod=viewthread&tid=4586

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案
CSS如何使用Flex和Grid布局如何实现3D骰子
Flex布局史上最简单使用语法教程
新的CSS 伪类函数 :is() 和 :where()示例详解
纯CSS打字动画的如何实现示例