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>  

    </div>  

</div>  

<div class="fr arrow_shadow">  

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!