您现在的位置是：网站首页> 编程资料编程资料

CSS制作三角形广告引导文字效果_CSS教程_CSS_网页制作_

2021-09-13 937人已围观

简介 这篇文章主要为大家详细介绍了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.8b>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>

    上一篇：Div+CSS仿微信公众平台登录页面_Div+CSS教程_CSS_网页制作_

    下一篇：利用CSS的Sass预处理器（框架）来制作居中效果_css3_CSS_网页制作_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网