CSS制作三角形广告引导文字效果

网页设计 跟版网
这篇文章主要为大家详细介绍了CSS制作三角形广告引导文字效果，效果简洁大方，使用三角形广告文字效果更有吸引力，感兴趣的小伙伴们可以参考一下

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

原图某区域如下：

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

比如其中一个三角形

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

HTML代码如下：

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

CSS样式如下：

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

以上就是本文的全部内容，希望对大家的学习有所帮助。

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！

相关文档推荐

CSS中设置margin:0 auto; 水平居中无效的原因分析
很多初学制作网页的朋友，可能会遇到的一个常见问题，就是在CSS中加了margin:0 auto;却没有效果，不能居中的问题，margin:0 auto;的意思就是：上下边界为0，左右根据宽度自适应，其实就是水平居中的意思，在这里说两个典型的错误引起的不能居中的问题： 1、
10个有趣的Javascript和CSS库
前端领域又发生了翻天覆地的变化，涌现了许多优秀的Javascript和CSS库，我们继续给大家收集和整理部分出色的前端组件和库分享给大家，希望对您有所帮助。 Moon Moon是一个JavaScript UI库，类似Vue.js，但是相对vue更加简化和直接，它去除一些膨胀代码。 它
CSS实现背景透明,文字不透明（各浏览器兼容）[转载]
CSS实现背景透明,文字不透明（各浏览器兼容）[转载]以下是示例CSS部分代码：
【CSS】实现强制不换行/自动换行/强制换行CSS样式
强制不换行div{white-space:
【CSS兼容】CSS在不同浏览器下的Hack(IE6 / IE7 /IE8 /Firefox)
在写CSS样式编码时，难免会遇到对特定的浏览器进行样式设定。在讲述CSS的Hack前，先来了解下什么是CSS Hack?什么
【CSS入门】CSS的基础语法
了解CSS基础语法前，我们先了解个术语：选择器什么是选择器？我们先从CSS的角度去看HTML标签、属性...例如：HT
html教程css教程前端开发cms教程seo优化网页设计服务器数据库平面设计电脑教程编程教程互联网移动开发php编程java编程建站技巧Python编程
织梦资讯网 织梦模板 dede 外语学校 织梦鬼故事 竞价网站源码 竞价培训网 门户网站 织梦二次开发 织梦笑话网 dedecms笑话网 织梦源码 网站建设 搞笑图片 织梦教程 旅游网站源码 织梦旅游网 学校培训 html5 企业织梦源码 医院源码 后台样式 移动营销页 整形医院 大学医院 新手建站 客服代码 洗衣机维修 企业网站 淘宝客 导航菜单 教育网站 学校源码 装修网站 装修模板 美容整形 女性健康 妈妈网 机械源码 建站公司 珠宝首饰 苹果网站 手机资讯 美女图片 织梦模版打包 妇科源码 安卓市场源码 男性时尚网 健康之家 app应用网站 笑话网站 下载站 美女图片网 中医院网站 家装网站源码 QQ网站 标牌网站 魔兽世界网 淘宝客源码 YY网站源码 别墅设计网站 服装搭配网 宝宝起名网 站长网站 婚庆网站 脑科医院源码 笑话源码 肝胆医院 意外怀孕源码 工作室