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~~.好吧.现在努力,继续坚持. 看着以前写的东西,感觉自己在逐渐成长. 先上图: 本文主要记录如上图一样的.文字或内容不透明, ...
随机推荐
- iframe与include的区别
iframe与include区别和使用问题 1.iframe可以用在静态和动态页面,include只能用在动态页面. 2.iframe是视图级组合,include是代码级组合. 3.iframe独立成 ...
- 以管理员身份启动ClickOnce部署的应用程序
ClickOnce方式部署应用简单方便,估计很多人都用过,但这种方式存在一定的“缺陷”,即以管理员方式启动应用的问题,虽然出于安全考虑可以理解,但给需要管理员权限才能正常运行的程序带来了一定的麻烦,这 ...
- sdk 命令行
1.关闭服务命令:adb kill-server 2. 启动服务命令:adb start-server 3.查询当前设备命令:adb devices 4.安装应用程序命令:adb install [a ...
- IOS开发之TableView替换默认的checkmark为自定义图像
直接上代码: On cellForRowAtIndexPath: UIButton*button =[UIButton buttonWithType:UIButtonTypeCustom];CGRec ...
- hdu4486 Pen Counts(水题)
Pen Counts Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...
- Delphi 第三方组件
TMS Component Pack v7.0.0.0 TMS Component Pack 版本为Delphi和C++ Builder提供了超过350个VCL组件,用以创建功能丰富的.现代的和原生W ...
- careercup-树与图 4.3
4.3 给定一个有序整数数组,元素各不相同按升序排列,编写一个算法,创建一棵高度最小的二叉查找树. 解答 想要使构建出来的二叉树高度最小,那么对于任意结点, 它的左子树和右子树的结点数量应该相当.比如 ...
- 合并两个vectcor——2013-08-26
vector<int> v1; vector<int> v2; for(int i=0; i<5; i++) { v1.push_back(i); if(i%2==1) ...
- YII中引用自定义类
如果通过actions方法引用其他自定义类时 <?php class LoginController extends Controller { public function actionInd ...
- H5 canvas 小demo之小球的随机运动
1:结构之html----balls.html <!DOCTYPE html> <html> <head lang="en"> <meta ...