CSS创建三角形广告引导文本效果

街上经常碰到一些发各类广告传单的，有一次收到一张房地产广告的传单，顺手留下来，看着里面有些广告挺吸引人，同时也想练练自己css技术，故抽空做了一下。

原图某区域如下：

实现上图效果是需要一些想象力的，比如三角形的构成和左右两边的空白间距，懂的这个原理，然后熟练运用border属性，一切就OK了

比如其中一个三角形

XML/HTML Code复制内容到剪贴板
  1. <divclass="arrow_ltitle1">
  2. div>
XML/HTML Code复制内容到剪贴板
  1. div.arrow_ltitle1{
  2. width:0;
  3. height:0;
  4. border-top:35pxsolidwhite;
  5. border-bottom:35pxsolidwhite;
  6. border-left:25pxsolid#68C339;
  7. }

HTML代码如下：

XML/HTML Code复制内容到剪贴板
  1. <divclass="flarrow_shadow">
  2. <divclass="arrow_lcontent1fl">
  3. <divstyle="margin-top:10px">
  4. <div>
  5. 低容积率div>
  6. <div>
  7. <bstyle="font-size:15pt">仅2.8b>div>
  8. div>
  9. div>
  10. <divclass="arrow_ltitle1fl">
  11. div>
  12. <divclass="arrow_rtitle1fl">
  13. <divclass="arrow_rcontent1">
  14. <div>
  15. 同样的地块，那里建了10栋楼，这里仅仅7栋，居住舒适度你懂得！div>
  16. div>
  17. div>
  18. div>
  19. <divclass="frarrow_shadow">
  20. <divclass="arrow_lcontent2fl">
  21. <divstyle="margin-top:10px">
  22. <div>
  23. 低建筑密度div>
  24. <div>
  25. <bstyle="font-size:12pt">仅23.51%b>div>
  26. div>
  27. div>
  28. <divclass="arrow_ltitle2fl">
  29. div>
  30. <divclass="arrow_rtitle2fl">
  31. <divclass="arrow_rcontent2"style="margin-top:8px">
  32. <div>
  33. 最大栋距达到近200米，div>
  34. <div>
  35. 视觉空间超乎想象！div>
  36. div>
  37. div>
  38. div>
  39. <divclass="empty10">
  40. div>
  41. <divclass="flarrow_shadow">
  42. <divclass="arrow_lcontent3fl">
  43. <divstyle="margin-top:13px">
  44. <div>
  45. 建材用的贵div>
  46. <div>
  47. 品质有保障div>
  48. div>
  49. div>
  50. <divclass="arrow_ltitle3fl">
  51. div>
  52. <divclass="arrow_rtitle3fl">
  53. <divclass="arrow_rcontent3">
  54. <div>
  55. 含钢量超出市场同类产品约30%，品质有保障，给您一个五星级的家。div>
  56. div>
  57. div>
  58. div>
  59. <divclass="frarrow_shadow">
  60. <divclass="arrow_lcontent4fl">
  61. <divstyle="margin-top:5px">
  62. <div>
  63. 临江div>
  64. <div>
  65. 瞰岛div>
  66. <div>
  67. 官佛div>
  68. div>
  69. div>
  70. <divclass="arrow_ltitle4fl">
  71. div>
  72. <divclass="arrow_rtitle4fl">
  73. <divclass="arrow_rcontent4">
  74. <div>
  75. 远离噪音污染，div>
  76. <div>
  77. 与佛相伴修生养性；div>
  78. <div>
  79. 上风上水财运滚滚！div>
  80. div>
  81. div>
  82. div>
  83. <divclass="empty10">
  84. div>
  85. <divclass="flarrow_shadow">
  86. <divclass="arrow_lcontent5fl">
  87. <divstyle="margin-top:5px">
  88. <div>
  89. 贴近自然div>
  90. <div>
  91. 畅想都市div>
  92. <div>
  93. 慢生活div>
  94. div>
  95. div>
  96. <divclass="arrow_ltitle5fl">
  97. div>
  98. <divclass="arrow_rtitle5fl">
  99. <divclass="arrow_rcontent5">
  100. <div>
  101. 太阳岛一墙之隔，div>
  102. <div>
  103. 大佛景区近在咫尺，div>
  104. <div>
  105. 远离都市尾气生活！div>
  106. div>
  107. div>
  108. div>
  109. <divclass="frarrow_shadow">
  110. <divclass="arrow_lcontent6fl">
  111. <divstyle="margin-top:13px">
  112. <div>
  113. 买房装修div>
  114. <div>
  115. 一步到位div>
  116. div>
  117. div>
  118. <divclass="arrow_ltitle6fl">
  119. div>
  120. <divclass="arrow_rtitle6fl">
  121. <divclass="arrow_rcontent6">
  122. <div>
  123. 四川家装连锁品牌芙蓉锦城提供多种精装套餐服务，实体样板呈现，恭迎品鉴div>
  124. div>
  125. div>
  126. div>

CSS样式如下：

CSS Code复制内容到剪贴板
  1. body{font-family:微软雅黑;padding:0;margin:0pxauto;width:700px;}
  3. .fl{float:left;}
  5. .fr{float:rightright;}
  7. .empty10{height:20px;clear:both}
  9. .shadow{-moz-box-shadow:0020px#777676;box-shadow:0020px#777676;padding:5px;background:white;}
  11. .arrow_shadow{-moz-box-shadow:5px5px10px#B7B7B7;box-shadow:5px5px10px#B7B7B7;}
  13. /*第1个广告样式*/
  14. div.arrow_ltitle1{width:0;height:0;border-top:35pxsolidwhite;border-bottom:35pxsolidwhite;border-left:25pxsolid#68C339;}
  16. div.arrow_rtitle1{position:relative;width:0;height:0;border-top:35pxsolid#68C339;border-right:210pxsolid#68C339;border-bottom:35pxsolid#68C339;border-left:25pxsolidwhite;}
  18. div.arrow_lcontent1{text-align:center;width:80px;height:70px;background:#68C339;color:white;font-size:15px;}
  20. div.arrow_rcontent1{color:white;position:absolute;left:10px;top:-30px;width:180px;font-size:15px;}
  22. /*第2个广告样式*/
  23. div.arrow_ltitle2{width:0;height:0;border-top:35pxsolidwhite;border-bottom:35pxsolidwhite;border-left:25pxsolid#E2B32E;}
  25. div.arrow_rtitle2{position:relative;width:0;height:0;border-top:35pxsolid#E2B32E;border-right:210pxsolid#E2B32E;border-bottom:35pxsolid#E2B32E;border-left:25pxsolidwhite;}
  27. div.arrow_lcontent2{text-align:center;width:80px;height:70px;background:#E2B32E;color:white;font-size:15px;}
  29. div.arrow_rcontent2{color:white;position:absolute;left:10px;top:-30px;width:180px;font-size:15px;}
  31. /*第3个广告样式*/
  32. div.arrow_ltitle3{width:0;height:0;border-top:35pxsolidwhite;border-bottom:35pxsolidwhite;border-left:25pxsolid#4381CE;}
  34. div.arrow_rtitle3{position:relative;width:0;height:0;border-top:35pxsolid#4381CE;border-right:210pxsolid#4381CE;border-bottom:35pxsolid#4381CE;border-left:25pxsolidwhite;}
  36. div.arrow_lcontent3{text-align:center;width:80px;height:70px;background:#4381CE;color:white;font-size:15px;}
  38. div.arrow_rcontent3{color:white;position:absolute;left:10px;top:-30px;width:180px;font-size:15px;}
  40. /*第4个广告样式*/
  41. div.arrow_ltitle4{width:0;height:0;border-top:35pxsolidwhite;border-bottom:35pxsolidwhite;border-left:25pxsolid#9C2E8F;}
  43. div.arrow_rtitle4{position:relative;width:0;height:0;border-top:35pxsolid#9C2E8F;border-right:210pxsolid#9C2E8F;border-bottom:35pxsolid#9C2E8F;border-left:25pxsolidwhite;}
  45. div.arrow_lcontent4{text-align:center;width:80px;height:70px;background:#9C2E8F;color:white;font-size:15px;}
  47. div.arrow_rcontent4{color:white;position:absolute;left:10px;top:-30px;width:180px;font-size:15px;}
  49. /*第5个广告样式*/
  50. div.arrow_ltitle5{width:0;height:0;border-top:35pxsolidwhite;border-bottom:35pxsolidwhite;border-left:25pxsolid#403D6F;}
  52. div.arrow_rtitle5{position:relative;width:0;height:0;border-top:35pxsolid#403D6F;border-right:210pxsolid#403D6F;border-bottom:35pxsolid#403D6F;border-left:25pxsolidwhite;}
  54. div.arrow_lcontent5{text-align:center;width:80px;height:70px;background:#403D6F;color:white;font-size:15px;}
  56. div.arrow_rcontent5{color:white;position:absolute;left:10px;top:-30px;width:180px;font-size:15px;}
  58. /*第6个广告样式*/
  59. div.arrow_ltitle6{width:0;height:0;border-top:35pxsolidwhite;border-bottom:35pxsolidwhite;border-left:25pxsolid#EA6F05;}
  61. div.arrow_rtitle6{position:relative;width:0;height:0;border-top:35pxsolid#EA6F05;border-right:210pxsolid#EA6F05;border-bottom:35pxsolid#EA6F05;border-left:25pxsolidwhite;}
  63. div.arrow_lcontent6{text-align:center;width:80px;height:70px;background:#EA6F05;color:white;font-size:15px;}
  65. div.arrow_rcontent6{color:white;position:absolute;left:10px;top:-30px;width:180px;font-size:15px;}

以上就是CSS创建三角形广告引导文本效果的全部内容，希望对大家的学习有所帮助，更多关于CSS的内容，可以多多关注下中国E盟技术频道。

    A+
发布日期：2019-09-20  所属分类：CSS
标签：