CSS三角形广告文字

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

原图某区域如下：

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

比如其中一个三角形

<div class="arrow_ltitle1">

        </div>

div.arrow_ltitle1 {

    width:;

    height:;

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

            </div>

        </div>

    </div>

    <div class="fr arrow_shadow">

        <div class="arrow_lcontent2 fl">

            <div style="margin-top: 10px">

                <div>

                    低建筑密度</div>

                <div>

                    <b style="font-size: 12pt">仅23.51%</b></div>

            </div>

        </div>

        <div class="arrow_ltitle2 fl">

        </div>

        <div class="arrow_rtitle2 fl">

            <div class="arrow_rcontent2" style="margin-top: 8px">

                <div>

                    最大栋距达到近200米，</div>

                <div>

                    视觉空间超乎想象！</div>

            </div>

        </div>

    </div>

    <div class="empty10">

    </div>

    <div class="fl arrow_shadow">

        <div class="arrow_lcontent3 fl">

            <div style="margin-top: 13px">

                <div>

                    建材用的贵</div>

                <div>

                    品质有保障</div>

            </div>

        </div>

        <div class="arrow_ltitle3 fl">

        </div>

        <div class="arrow_rtitle3 fl">

            <div class="arrow_rcontent3">

                <div>

                    含钢量超出市场同类产品约30%，品质有保障，给您一个五星级的家。</div>

            </div>

        </div>

    </div>

    <div class="fr arrow_shadow">

        <div class="arrow_lcontent4 fl">

            <div style="margin-top: 5px">

                <div>

                    临江</div>

                <div>

                    瞰岛</div>

                <div>

                    官佛</div>

            </div>

        </div>

        <div class="arrow_ltitle4 fl">

        </div>

        <div class="arrow_rtitle4 fl">

            <div class="arrow_rcontent4">

                <div>

                    远离噪音污染，</div>

                <div>

                    与佛相伴修生养性；</div>

                <div>

                    上风上水财运滚滚！</div>

            </div>

        </div>

    </div>

    <div class="empty10">

    </div>

    <div class="fl arrow_shadow">

        <div class="arrow_lcontent5 fl">

            <div style="margin-top: 5px">

                <div>

                    贴近自然</div>

                <div>

                    畅想都市</div>

                <div>

                    慢生活</div>

            </div>

        </div>

        <div class="arrow_ltitle5 fl">

        </div>

        <div class="arrow_rtitle5 fl">

            <div class="arrow_rcontent5">

                <div>

                    太阳岛一墙之隔，</div>

                <div>

                    大佛景区近在咫尺，</div>

                <div>

                    远离都市尾气生活！</div>

            </div>

        </div>

    </div>

    <div class="fr arrow_shadow">

        <div class="arrow_lcontent6 fl">

            <div style="margin-top: 13px">

                <div>

                    买房装修</div>

                <div>

                    一步到位</div>

            </div>

        </div>

        <div class="arrow_ltitle6 fl">

        </div>

        <div class="arrow_rtitle6 fl">

            <div class="arrow_rcontent6">

                <div>

                    四川家装连锁品牌芙蓉锦城提供多种精装套餐服务，实体样板呈现，恭迎品鉴</div>

            </div>

        </div>

    </div>

CSS样式如下：

body{font-family: 微软雅黑; padding:; margin:0px auto; width:700px; }

.fl{float: left;}

.fr{float: right;}

.empty10{ height:20px; clear:both}

.shadow{-moz-box-shadow: 0 0 20px #777676;box-shadow: 0 0 20px #777676; padding: 5px; background: white;}

.arrow_shadow{-moz-box-shadow: 5px 5px 10px #B7B7B7;  box-shadow: 5px 5px 10px #B7B7B7;}

/*第1个广告样式*/

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

div.arrow_rtitle1{ position: relative;  width:;height:; border-top: 35px solid #68C339; border-right: 210px solid #68C339; border-bottom: 35px solid #68C339; border-left: 25px solid white;}

div.arrow_lcontent1{text-align: center; width: 80px; height: 70px;background: #68C339;color: white;font-size: 15px;}

div.arrow_rcontent1{color: white;position: absolute;left: 10px;top: -30px;width: 180px;font-size: 15px;}

/*第2个广告样式*/

div.arrow_ltitle2{width:; height:;border-top: 35px solid white;border-bottom: 35px solid white; border-left: 25px solid #E2B32E;}

div.arrow_rtitle2{ position: relative;  width:;height:; border-top: 35px solid #E2B32E; border-right: 210px solid #E2B32E; border-bottom: 35px solid #E2B32E; border-left: 25px solid white;}

div.arrow_lcontent2{text-align: center; width: 80px; height: 70px;background: #E2B32E;color: white;font-size: 15px;}

div.arrow_rcontent2{color: white;position: absolute;left: 10px;top: -30px;width: 180px;font-size: 15px;}

/*第3个广告样式*/

div.arrow_ltitle3{width:; height:;border-top: 35px solid white;border-bottom: 35px solid white; border-left: 25px solid #4381CE;}

div.arrow_rtitle3{ position: relative;  width:;height:; border-top: 35px solid #4381CE; border-right: 210px solid #4381CE; border-bottom: 35px solid #4381CE; border-left: 25px solid white;}

div.arrow_lcontent3{text-align: center; width: 80px; height: 70px;background: #4381CE;color: white;font-size: 15px;}

div.arrow_rcontent3{color: white;position: absolute;left: 10px;top: -30px;width: 180px;font-size: 15px;}

/*第4个广告样式*/

div.arrow_ltitle4{width:; height:;border-top: 35px solid white;border-bottom: 35px solid white; border-left: 25px solid #9C2E8F;}

div.arrow_rtitle4{ position: relative;  width:;height:; border-top: 35px solid #9C2E8F; border-right: 210px solid #9C2E8F; border-bottom: 35px solid #9C2E8F; border-left: 25px solid white;}

div.arrow_lcontent4{text-align: center; width: 80px; height: 70px;background: #9C2E8F;color: white;font-size: 15px;}

div.arrow_rcontent4{color: white;position: absolute;left: 10px;top: -30px;width: 180px;font-size: 15px;}

/*第5个广告样式*/

div.arrow_ltitle5{width:; height:;border-top: 35px solid white;border-bottom: 35px solid white; border-left: 25px solid #403D6F;}

div.arrow_rtitle5{ position: relative;  width:;height:; border-top: 35px solid #403D6F; border-right: 210px solid #403D6F; border-bottom: 35px solid #403D6F; border-left: 25px solid white;}

div.arrow_lcontent5{text-align: center; width: 80px; height: 70px;background: #403D6F;color: white;font-size: 15px;}

div.arrow_rcontent5{color: white;position: absolute;left: 10px;top: -30px;width: 180px;font-size: 15px;}

/*第6个广告样式*/

div.arrow_ltitle6{width:; height:;border-top: 35px solid white;border-bottom: 35px solid white; border-left: 25px solid #EA6F05;}

div.arrow_rtitle6{ position: relative;  width:;height:; border-top: 35px solid #EA6F05; border-right: 210px solid #EA6F05; border-bottom: 35px solid #EA6F05; border-left: 25px solid white;}

div.arrow_lcontent6{text-align: center; width: 80px; height: 70px;background: #EA6F05;color: white;font-size: 15px;}

div.arrow_rcontent6{color: white;position: absolute;left: 10px;top: -30px;width: 180px;font-size: 15px;}

CSS三角形广告文字的更多相关文章

CSS文本与文字
-255之间 14.2 CSS中的文字属性属性名称属性值说明 font-style norma ...
前端读者 | CSS三角形和饼图
@羯瑞三角形 .triangle{width:0;height:0;border-width:50px;border-style:solid;border-color:red blue green ...
CSS样式解决文字过长显示省略号问题
一.CSS样式解决文字过长显示省略号问题 1.一般样式一般 css 样式,当宽度不够时,可能会出现换行的效果.这样的效果在某些时候肯定是不行的,可以修改 css 样式来解决这个问题. <!D ...
css: transform导致文字显示模糊
css: transform导致文字显示模糊有人认为模糊的原因是:"transform时div的宽度或者高度并不是偶数,偏移 50% 之后,像素点不是整数,和显示像素没有对上". ...
CSS三角形的实现原理及运用
原理 css盒模型一个盒子包括: margin+border+padding+content– 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小 ...
css实现一行文字居中，多行文字左对齐
问题及场景: 当内容能一行显示在盒子内时,文字居中对齐. 当内容过多换行后显示在盒子内时,文字左对齐. 其实这种视觉上的需求还是蛮常见的.比如用于弹出提示框,当提示内容比较少时,内容居中显示在弹出框, ...
html&css中的文字对齐问题
html&css的使用过程中,我们经常会遇到很多文字对齐问题.下面我要介绍一个有丁点难的文字对齐问题. 实现效果如下图所示. 两行长度不定的文字,要让它们总体水平居中,然后,这两行字要左对 ...
CSS隐藏多余文字的几个方法
通常偏移掉字体的方式是 (1)使用text-indent:-9999px; 可是他有一个局限性他只适用于块级元素block而我们往往有时候想偏移掉的a上的字体所以问题就来了text-indent:- ...
css 背景透明文字(内容)不透明三种实现方法
好久没写博客了.以前还想着最少一个月抽空写几篇.结果没做到O(∩_∩)O~~.好吧.现在努力,继续坚持. 看着以前写的东西,感觉自己在逐渐成长. 先上图: 本文主要记录如上图一样的.文字或内容不透明, ...

随机推荐

Ejabberd2:安装和操作指南(centos yum 安装ejabberd)
(1)首先安装EPEL Repository ## RHEL/CentOS 6 32-Bit ## # wget http://download.fedoraproject.org/pub/ ...
自己动手Jquery插件
最近Web应用程序中越来越多地用到了JQuery等Web前端技术.这些技术框架有效地改善了用户的操作体验,同时也提高了开发人员构造丰富客户端UI的效率.JQuery本身提供了丰富的操作,但是,有时候 ...
psd via fft and pwelch
%fft and pwelch方法求取功率谱load x.mat Fs = 1; t = (0:1/Fs:1-1/Fs).'; Nx = length(x); % Window data w = ha ...
【面试虐菜】—— Oracle中CHAR、VARCHAR的区别
1.CHAR. CHAR存储定长数据很方便,CHAR字段上的索引效率级高,比如定义char(10),那么不论你存储的数据是否达到了10个字节,都要占去10个字节的空间,不足的自动用空格填充,所以在读取 ...
FireMonkey 使用Webbrowser
DELPHI XE5 源码PASCAL:http://files.cnblogs.com/xe2011/FireMonkey_Webbrowser.rar 为了这个用上webbrowser真是费太大劲 ...
java中synchronized使用方法
synchronized的一个简单样例 public class TextThread { /** * @param args */ public static void main(String[ ...
shell 中函数放回字符串问题
shell 中函数放回字符串问题 shell 中不可以直接 return 字符串 ,可以return 数字.如果要return 字符串改为 echo "hello world" ...
android弧形进度条，有详细注释的，比较简单
Java code? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 ...
谓词(NSPredicate)
OC中的谓词操作是针对于数组类型的,他就好比数据库中的查询操作,数据源就是数组,这样的好处是我们不需要编写很多代码就可以去操作数组,同时也起到过滤的作用,我们可以编写简单的谓词语句,就可以从数组中过滤 ...
Android开发--UI之Bundle的使用
Android开发–UI之Bundle的使用最近,把之前学过的东西大体的整理了以下,并且想把学过的心得分享给大家.我自己做了一个小小的demo,以便说明具体的应用. 这里的两个界面是通过第一个界面输 ...

CSS三角形广告文字

CSS三角形广告文字的更多相关文章

随机推荐

热门专题