CSS3奇思妙想,使用CSS3实现各类图形

气泡三角形 利用 border 的 transparent 特性实现

.bubbly

切角 使用线性渐变实现

.notching

弧形切角 使用径向渐变实现

.arc

单个颜色实现 hover 和 active 时的明暗变化效果 利用伪类及透明度实现

.pesudo

梯形 利用伪类加旋转透视实现

.trapezoid

饼图 利用伪类、线性渐变、旋转实现

.pie

平行四边形 利用伪类、拉伸实现

.parallelogram

菱形 利用伪类、旋转实现

.diamond

折角 利用切角、伪类、渐变、旋转实现

.corner

下划线 利用 background-image 实现

.underline1-ajkpys

.underline2-ajkpys

.underline3-ajkpys

spectiveBlur 纯 CSS 方案实现背景变暗效果(hover按钮触发)

.spectiveBlur

条纹背景图 利用渐变实现

.stripe

条纹背景图 利用渐变实现

.wave-stripe

条纹背景图 利用渐变实现

.arrow-stripe

混合模式背景图 利用渐变实现

.colorful-stripe

随机背景图 利用渐变、蝉随机实现

.random-stripe

晴天(sun)(单标签实现) 利用线性渐变、阴影、旋转实现

.sun

多云(cloudy)(单标签实现) 利用线性渐变、阴影、缩放实现

.cloudy

雨(rainy) 利用线性渐变、阴影、缩放实现

.rainy

微风(breeze) 利用border、transparent、实现

.breeze

彩虹(rainbow) 利用border、box-shadow 实现

.rainbow

夜空璀璨(starry) 利用 box-shadow 实现

.starry

雷电(thunder) 利用阴影、border实现

.thunder

雪(snowy) 利用阴影实现

.snowy

五角星(单标签实现) 利用border、transparent、旋转实现

太极图(单标签实现) 利用 box-shadow 实现

美队盾牌(单标签实现) 利用 渐变 实现
纽扣(单标签实现) 利用 渐变、阴影 实现
Chrome(单标签实现) 利用渐变实现

Opera(单标签实现) 利用渐变、实现

IE(单标签实现) 利用渐变、多重阴影实现

safari(单标签实现) 利用渐变、border、旋转实现

sogou(单标签实现) 利用文字、阴影实现

firefox(单标签实现) 利用多重阴影实现
电池电量显示(单标签实现) 利用 渐变 实现