原图某区域如下:
实现上图效果是需要一些想象力的,比如三角形的构成和左右两边的空白间距,懂的这个原理,然后熟练运用border属性,一切就OK了
比如其中一个三角形
XML/HTML Code复制内容到剪贴板
- <div class="arrow_ltitle1">
- </div>
- div.arrow_ltitle1 {
- width: 0;
- height: 0;
- 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样式如下: