CSS制作三角形广告引导文字效果

时间：2021-05-08

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

原图某区域如下：

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

比如其中一个三角形

XML/HTML Code复制内容到剪贴板

<divclass="arrow_ltitle1">

</div>

XML/HTML Code复制内容到剪贴板

div.arrow_ltitle1{

width:0;

height:0;

border-top:35pxsolidwhite;

border-bottom:35pxsolidwhite;

border-left:25pxsolid#68C339;

}

HTML代码如下：

XML/HTML Code复制内容到剪贴板

<divclass="flarrow_shadow">

<divclass="arrow_lcontent1fl">

<divstyle="margin-top:10px">

<div>

低容积率</div>

<div>

<bstyle="font-size:15pt">仅2.8</b></div>

</div>

<divclass="arrow_ltitle1fl">

</div>

<divclass="arrow_rtitle1fl">

<divclass="arrow_rcontent1">

<div>

同样的地块，那里建了10栋楼，这里仅仅7栋，居住舒适度你懂得！</div>

</div>

<divclass="frarrow_shadow">

<divclass="arrow_lcontent2fl">

<divstyle="margin-top:10px">

<div>

低建筑密度</div>

<div>

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

</div>

<divclass="arrow_ltitle2fl">

</div>

<divclass="arrow_rtitle2fl">

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

<div>

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

<div>

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

</div>

<divclass="empty10">

</div>

<divclass="flarrow_shadow">

<divclass="arrow_lcontent3fl">

<divstyle="margin-top:13px">

<div>

建材用的贵</div>

<div>

品质有保障</div>

</div>

<divclass="arrow_ltitle3fl">

</div>

<divclass="arrow_rtitle3fl">

<divclass="arrow_rcontent3">

<div>

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

</div>

<divclass="frarrow_shadow">

<divclass="arrow_lcontent4fl">

<divstyle="margin-top:5px">

<div>

临江</div>

<div>

瞰岛</div>

<div>

官佛</div>

</div>

<divclass="arrow_ltitle4fl">

</div>

<divclass="arrow_rtitle4fl">

<divclass="arrow_rcontent4">

<div>

远离噪音污染，</div>

<div>

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

<div>

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

</div>

<divclass="empty10">

</div>

<divclass="flarrow_shadow">

<divclass="arrow_lcontent5fl">

<divstyle="margin-top:5px">

<div>

贴近自然</div>

<div>

畅想都市</div>

<div>

慢生活</div>

</div>

<divclass="arrow_ltitle5fl">

</div>

<divclass="arrow_rtitle5fl">

<divclass="arrow_rcontent5">

<div>

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

<div>

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

<div>

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

</div>

<divclass="frarrow_shadow">

<divclass="arrow_lcontent6fl">

<divstyle="margin-top:13px">

<div>

买房装修</div>

<div>

一步到位</div>

</div>

<divclass="arrow_ltitle6fl">

</div>

<divclass="arrow_rtitle6fl">

<divclass="arrow_rcontent6">

<div>

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

</div>

CSS样式如下：

CSS Code复制内容到剪贴板

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

.fl{float:left;}

.fr{float:rightright;}

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

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

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

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

div.arrow_rtitle1{position:relative;width:0;height:0;border-top:35pxsolid#68C339;border-right:210pxsolid#68C339;border-bottom:35pxsolid#68C339;border-left:25pxsolidwhite;}

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;}

div.arrow_ltitle2{width:0;height:0;border-top:35pxsolidwhite;border-bottom:35pxsolidwhite;border-left:25pxsolid#E2B32E;}

div.arrow_rtitle2{position:relative;width:0;height:0;border-top:35pxsolid#E2B32E;border-right:210pxsolid#E2B32E;border-bottom:35pxsolid#E2B32E;border-left:25pxsolidwhite;}

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;}

div.arrow_ltitle3{width:0;height:0;border-top:35pxsolidwhite;border-bottom:35pxsolidwhite;border-left:25pxsolid#4381CE;}

div.arrow_rtitle3{position:relative;width:0;height:0;border-top:35pxsolid#4381CE;border-right:210pxsolid#4381CE;border-bottom:35pxsolid#4381CE;border-left:25pxsolidwhite;}

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;}

div.arrow_ltitle4{width:0;height:0;border-top:35pxsolidwhite;border-bottom:35pxsolidwhite;border-left:25pxsolid#9C2E8F;}

div.arrow_rtitle4{position:relative;width:0;height:0;border-top:35pxsolid#9C2E8F;border-right:210pxsolid#9C2E8F;border-bottom:35pxsolid#9C2E8F;border-left:25pxsolidwhite;}

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;}

div.arrow_ltitle5{width:0;height:0;border-top:35pxsolidwhite;border-bottom:35pxsolidwhite;border-left:25pxsolid#403D6F;}

div.arrow_rtitle5{position:relative;width:0;height:0;border-top:35pxsolid#403D6F;border-right:210pxsolid#403D6F;border-bottom:35pxsolid#403D6F;border-left:25pxsolidwhite;}

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;}

div.arrow_ltitle6{width:0;height:0;border-top:35pxsolidwhite;border-bottom:35pxsolidwhite;border-left:25pxsolid#EA6F05;}

div.arrow_rtitle6{position:relative;width:0;height:0;border-top:35pxsolid#EA6F05;border-right:210pxsolid#EA6F05;border-bottom:35pxsolid#EA6F05;border-left:25pxsolidwhite;}

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制作三角形广告引导文字效果

相关文章

C#判断三角形的类型

用CSS制作三角形和按钮的简单实例

CSS仿网易首页的头部菜单栏按钮和三角形制作方法

小程序和web画三角形实现解析

WPF实现平面三角形3D运动效果