hwh4729的专栏

在网页中经常会遇到在新闻等列表前面加一些小三角图标，通常我们都采用图片做背景来完成，今天我们介绍另一种方法：用纯CSS写一个出来。设计思路：我们先来看一下盒模型我们先画一个矩形(.list-li)出来,把它的高度和宽度设为0，再设这个矩形的左边框、上边框、下边框各设为50像素，再给与不同的颜色（红、蓝、绿）盒模型如下图：实现代码如下：CSS小三角的做法

<br /><br />首先来回顾一段基础：<br />“z-index : auto | number<br />auto：默认值。<br />number：无单位的整数值，可为负数。使用范围： 适用于定位元素（position 属性值为 relative 或 absolute 或 fixed的对象）。<br />z-index 值较大的元素将叠加在z-index值较小的元素之上。对于未指定此属性的定位对象，z-index 值为正数的对象会在其之上，而z-index 值为负数的对象在其之下。注意：这个属性

<br />效果展示：<br />#xsnazzy h1, #xsnazzy h2, #xsnazzy p {margin:0 10px; letter-spacing:1px;}#xsnazzy h1 {font-size:2.5em; color:#fff;}#xsnazzy h2 {font-size:2em;color:#06a; border:0;}#xsnazzy p {padding-bottom:0.5em;}#xsnazzy h2 {padding-top:0.5em;