史上最强大的40多个纯CSS绘制的图形
今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形、圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家。
Square(正方形)
1 2 3 4 5 |
|
Rectangle(矩形)
1 2 3 4 5 |
|
Circle(圆形)
1 2 3 4 5 6 7 8 9 10 |
|
Oval(椭圆形)
1 2 3 4 5 6 7 8 9 10 |
|
Triangle Up(向上的三角形)
1 2 3 4 5 6 7 |
|
Triangle Down(向下)
1 2 3 4 5 6 7 |
|
Triangle Left(向左)
1 2 3 4 5 6 7 |
|
Triangle Right(向右)
1 2 3 4 5 6 7 |
|
Triangle Top Left(左上)
1 2 3 4 5 6 |
|
Triangle Top Right(右上)
1 2 3 4 5 6 |
|
Triangle Bottom Left(左下)
1 2 3 4 5 6 |
|
Triangle Bottom Right(右下)
1 2 3 4 5 6 |
|
Curved Tail Arrow(弯尾箭头)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
|
Trapezoid(梯形)
1 2 3 4 5 6 7 |
|
Parallelogram(平行四边形)
1 2 3 4 5 6 7 8 |
|
Star (6-points)(六角星)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
Star (5-points)(五角星)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
|
Pentagon(五边形)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
Hexagon(六边形)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
|
Octagon(八边形)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
|
Heart(心形)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
|
Infinity(无限符图形)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
|
Diamond Square(菱形)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
Diamond Shield(钻石盾牌)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
Diamond Narrow
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
Cut Diamond(砖石形)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
|
Egg(鸡蛋)
1 2 3 4 5 6 7 8 |
|
Pac-Man(吃豆人)
1 2 3 4 5 6 7 8 9 10 11 12 |
|
Talk Bubble(聊天框)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
|
12 Point Burst(爆炸形状)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
|
Yin Yang(阴阳八卦)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
|
Badge Ribbon(徽章丝带)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
|
Space Invader(太空入侵者)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
|
TV Screen(电视屏幕)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
|
Chevron(雪佛龙)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
|
Magnifying Glass(放大镜)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
|
Cone(圆锥形)
1 2 3 4 5 6 7 8 9 10 |
|
Moon(月亮)
1 2 3 4 5 6 |
|
Cross(十字架)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
以上就是纯CSS绘制的各种图形,感受到CSS的强大了吧。