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~~.好吧.现在努力,继续坚持. 看着以前写的东西,感觉自己在逐渐成长. 先上图: 本文主要记录如上图一样的.文字或内容不透明, ...

随机推荐

jbpm4.4 demo2
package cn.itcast.b_processdefinition; import java.io.FileInputStream; import java.io.FileOutputStre ...
cocos2d-x载入texture
转自:http://blog.csdn.net/aa4790139/article/details/8107325 SpriteTestLayer.cpp(就只改了这个这个文件) #include & ...
【转】Spring websocket 使用
http://docs.spring.io/spring/docs/current/spring-framework-reference/html/websocket.html https://spr ...
java transient简单介绍
我们都知道一个对象仅仅要实现了Serilizable接口,这个对象就能够被序列化,java的这样的序列化模式为开发人员提供了非常多便利,我们能够不必关系详细序列化的过程,仅仅要这个类实现了Serili ...
centos nginx install openssl
1.查看是否已经安装 ssl 组件 [root@localhost wwwlogs]# cd /usr/local/nginx/sbin/ [root@localhost sbin]# ./nginx ...
MVC - 基础
什么是MVC模式传统的WebForm发展到如今出现不少的缺陷比如为了解决Http的无状态 WebForm模式使用了ViewState来保存客户端和服务端数据过量的使用则会造成页面臃肿不堪大量服 ...
【转】Cocos2d-x 2.0 拖尾效果深入分析
Cocos2d-x 2.0 拖尾效果深入分析另:本章所用Cocos2d-x版本为: cocos2d-2.0-x-2.0.2@ Aug 30 2012 http://cn.cocos2d-x.org/ ...
PPTP、L2TP、IPSec和SSLVPN的区别
VPN (虚拟专用网)发展至今已经不在是一个单纯的经过加密的访问隧道了,它已经融合了访问控制.传输管理.加密.路由选择.可用性管理等多种功能,并在全球的信息安全体系中发挥着重要的作用.也在网络上,有关 ...
关于ellipsize属性使用的一些细节
ellipsize主要是处理当文字长度超过TextView可显示的长度的时候,系统的处理方式,ellipsize主要有以下几种值: android:ellipsize="start" ...
IDispose(), Finalize()
C# using 用法: 1. 作为指令,用于为命名空间创建别名或导入其他命名空间中定义的类型.(见例1-1) 2. 作为语句,用于定义一个范围,在此范围的末尾将释放对象.(见例1-2) (例子1- ...

CSS三角形广告文字

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

随机推荐

热门专题