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

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

原图某区域如下：

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

比如其中一个三角形

XML/HTML Code复制内容到剪贴板

<div class="arrow_ltitle1">  
        </div>  

XML/HTML Code复制内容到剪贴板

div.arrow_ltitle1 {   
    width: 0;   
    height: 0;   
    border-top: 35px solid white;   
    border-bottom: 35px solid white;   
    border-left: 25px solid #68C339;   
}   
  

HTML代码如下：

XML/HTML Code复制内容到剪贴板

<div class="fl arrow_shadow">  
    <div class="arrow_lcontent1 fl">  
        <div style="margin-top: 10px">  
            <div>  
                低容积率</div>  
            <div>  
                <b style="font-size: 15pt">仅2.8</b></div>  
        </div>  
    </div>  
    <div class="arrow_ltitle1 fl">  
    </div>  
    <div class="arrow_rtitle1 fl">  
        <div class="arrow_rcontent1">  
            <div>  
                同样的地块，那里建了10栋楼，这里仅仅7栋，居住舒适度你懂得！</div>  
        </div>