CSS三角形广告文字

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

原图某区域如下：

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

比如其中一个三角形

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

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

HTML代码如下：

    <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栋，居住舒适度你懂得