用纯CSS3绘制26个英文字母
首页
关于Webhek
这个里面里你能看到的26个标准的英文字母并不是普通的字体，它们是用CSS在空白的页面上绘制出来的，纯css作品，用鼠标移动到CSS代码上，你能看的这段代码绘制的相应的字母局部。主要运用了CSS3里的多个新变换功能，需要使用最新的浏览器进行观赏。
.A
{
position
:
relative
;
left
:
30
px
;
width
:
60
px
;
height
:
91
px
;
border-bottom
:
solid 14
px
#000000
;
}
.A:before
{
transform
:
skew(
-19
deg
,
0
);
position
:
absolute
;
content
:
''
;
top
:
12.5
px
;
left
:
0
;
width
:
16
px
;
height
:
125
px
;
background-color
:
#000000
;
}
.A:after
{
transform
:
skew(
19
deg
,
0
);
position
:
absolute
;
content
:
''
;
top
:
12.5
px
;
left
:
45
px
;
width
:
16
px
;
height
:
125
px
;
background-color
:
#000000
;
}
.B
{
position
:
relative
;
top
:
12.5
px
;
left
:
10
px
;
width
:
60
px
;
height
:
125
px
;
border-left
:
solid 16
px
#000000
;
}
.B:before
{
position
:
absolute
;
content
:
''
;
width
:
52
px
;
height
:
39
px
;
border-width
:
15
px
15
px
10
px
0
;
border-color
:
#000000
;
border-style
:
solid
;
border-radius
:
0 240
%
180
%
0
/
0 180
%
180
%
0
;
}
.B:after
{
position
:
absolute
;
content
:
''
;
bottom
:
0
;
width
:
58
px
;
height
:
43
px
;
border-width
:
10
px
15
px
15
px
0
;
border-color
:
#000000
;
border-style
:
solid
;
border-radius
:
0 180
%
220
%
0
/
0 180
%
180
%
0
;
}
.C
{
position
:
relative
;
top
:
12.5
px
;
left
:
10
px
;
width
:
84
px
;
height
:
95
px
;
border-width
:
15
px
12
px
15
px
16
px
;
border-color
:
#000000
;
border-style
:
solid
;
border-radius
:
50
%
;
}
.C:before
{
transform
:
rotate(
45
deg
);
position
:
absolute
;
content
:
''
;
top
:
2
px
;
left
:
49
px
;
background-color
:
#ffffff
;
width
:
90
px
;
height
:
90
px
;
}
.D
{
position
:
relative
;
top
:
12.5
px
;
left
:
10
px
;
border-left
:
solid 15
px
#000000
;
height
:
125
px
;
}
.D:before
{
position
:
absolute
;
content
:
''
;
top
:
0
;
left
:
0
;
width
:
60
px
;
height
:
95
px
;
border-width
:
15
px
15
px
15
px
0
;
border-color
:
#000000
;
border-style
:
solid
;
border-radius
:
0 300
%
300
%
0
/
0 180
%
180
%
0
;
}
.E
{
position
:
relative
;
top
:
12.5
px
;
left
:
10
px
;
width
:
63
px
;
height
:
95
px
;
border-width
:
15
px
0 15
px
16
px
;
border-color
:
#000000
;
border-style
:
solid
;
}
.E:before
{
position
:
absolute
;
content
:
''
;
top
:
38
px
;
left
:
0
px
;
width
:
53
px
;
height
:
15
px
;
background-color
:
#000000
;
}
.F
{
position
:
relative
;
top
:
12.5
px
;
left
:
10
px
;
width
:
63
px
;
height
:
110
px
;
border-width
:
15
px
0 0 16
px
;
border-color
:
#000000
;
border-style
:
solid
;
}
.F:before
{
position
:
absolute
;
content
:
''
;
top
:
38
px
;
left
:
0
px
;
width
:
53
px
;
height
:
15
px
;
background-color
:
#000000
;
}
.G
{
position
:
relative
;
top
:
12.5
px
;
left
:
10
px
;
width
:
84
px
;
height
:
95
px
;
border-width
:
15
px
12
px
15
px
16
px
;
border-color
:
#000000
;
border-style
:
solid
;
border-radius
:
50
%
;
}
.G:before
{
transform
:
rotate(
45
deg
);
position
:
absolute
;
content
:
''
;
top
:
2
px
;
left
:
48
px
;
background-color
:
#ffffff
;
width
:
90
px
;
height
:
90
px
;
}
.G:after
{
position
:
absolute
;
content
:
''
;
bottom
:
0.5
px
;
right
:
7
px
;
width
:
28
px
;
height
:
36
px
;
border-width
:
13
px
14
px
0 0
;
border-color
:
#000000
;
border-style
:
solid
;
}
.H
{
position
:
relative
;
top
:
12.5
px
;
left
:
10
px
;
width
:
60
px
;
height
:
125
px
;
border-width
:
0 16
px
0 16
px
;
border-color
:
#000000
;
border-style
:
solid
;
}
.H:before
{
position
:
absolute
;
content
:
''
;
top
:
53
px
;
left
:
0
;
width
:
60
px
;
height
:
14
px
;
background-color
:
#000000
;
}
.I
{
z-index
:
1
;
position
:
relative
;
top
:
12.5
px
;
left
:
20
px
;
width
:
16
px
;
height
:
125
px
;
background-color
:
#000000
;
}
.J
{
position
:
relative
;
top
:
12.5
px
;
left
:
-5
px
;
width
:
75
px
;
height
:
66
px
;
border-right
:
solid 16
px
#000000
;
}
.J:before
{
position
:
absolute
;
content
:
''
;
bottom
:
-60
px
;
right
:
-16
px
;
width
:
50
px
;
height
:
60
px
;
border-width
:
0 16
px
15
px
14
px
;
border-color
:
#000000
;
border-style
:
solid
;
border-radius
:
0 0 75
%
75
%
;
}
.J:after
{
transform
:
rotate(
-40
deg
);
position
:
absolute
;
content
:
''
;
top
:
40
px
;
left
:
-20
px
;
width
:
60
px
;
height
:
60
px
;
background-color
:
#ffffff
;
}
.K
{
position
:
relative
;
top
:
12.5
px
;
left
:
10
px
;
width
:
80
px
;
height
:
125
px
;
border-left
:
solid 16
px
#000000
;
overflow
:
hidden
;
}
.K:before
{
transform
:
skew(
-43
deg
,
0
);
position
:
absolute
;
content
:
''
;
top
:
0
;
left
:
16
px
;
width
:
19
px
;
height
:
84
px
;
background-color
:
#000000
;
}
.K:after
{
transform
:
skew(
30
deg
,
0
);
position
:
absolute
;
content
:
''
;
bottom
:
0
;
right
:
25
px
;
width
:
18
px
;
height
:
80
px
;
background-color
:
#000000
;
}
.L
{
position
:
relative
;
top
:
12.5
px
;
left
:
10
px
;
width
:
63
px
;
height
:
110
px
;
border-width
:
0 0 15
px
16
px
;
border-color
:
#000000
;
border-style
:
solid
;
}
.M
{
position
:
relative
;
top
:
12.5
px
;
left
:
10
px
;
width
:
80
px
;
height
:
125
px
;
border-width
:
0 15
px
0 15
px
;
border-color
:
#000000
;
border-style
:
solid
;
}
.M:before
{
transform
:
skew(
20
deg
,
0
);
position
:
absolute
;
content
:
''
;
top
:
0
;
left
:
14
px
;
width
:
12
px
;
height
:
110
px
;
background-color
:
#000000
;
}
.M:after
{
transform
:
skew(
-20
deg
,
0
);
position
:
absolute
;
content
:
''
;
top
:
0
;
right
:
14
px
;
width
:
12
px
;
height
:
110
px
;
background-color
:
#000000
;
}
.N
{
position
:
relative
;
top
:
12.5
px
;
left
:
10
px
;
width
:
63
px
;
height
:
125
px
;
border-width
:
0 15
px
0 15
px
;
border-color
:
#000000
;
border-style
:
solid
;
}
.N:before
{
transform
:
skew(
30
deg
,
0
);
position
:
absolute
;
content
:
''
;
top
:
0
;
left
:
24
px
;
width
:
15
px
;
height
:
125
px
;
background-color
:
#000000
;
}
.O
{
position
:
relative
;
top
:
12.5
px
;
left
:
10
px
;
width
:
70
px
;
height
:
97
px
;
border-width
:
14
px
16
px
14
px
16
px
;
border-color
:
#000000
;
border-style
:
solid
;
border-radius
:
55
%
/
52
%
;
}
.P
{
position
:
relative
;
top
:
12.5
px
;
left
:
10
px
;
width
:
60
px
;
height
:
125
px
;
border-left
:
solid 16
px
#000000
;
}
.P:before
{
position
:
absolute
;
content
:
''
;
width
:
56
px
;
height
:
50
px
;
border-width
:
13
px
15
px
13
px
0
;
border-color
:
#000000
;
border-style
:
solid
;
border-radius
:
0 220
%
220
%
0
/
0 180
%
180
%
0
;
}
.Q {
z-index
:
-1
;
position
:
relative
;
top
:
12.5
px
;
left
:
10
px
;
width
:
70
px
;
height
:
97
px
;
border-width
:
14
px
16
px
14
px
16
px
;
border-color
:
#000000
;
border-style
:
solid
;
border-radius
:
55
%
/
52
%
;
}
.Q:before
{
transform
:
rotate(
-84
deg
);
position
:
absolute
;
content
:
''
;
top
:
82
px
;
left
:
49
px
;
width
:
16
px
;
height
:
48
px
;
border-width
:
16
px
0 13
px
13
px
;
border-color
:
#000000
;
border-style
:
solid
;
border-radius
:
200
%
0 0 200
%
/
100
%
0 0 100
%
;
}
.Q:after
{
transform
:
rotate(
-18
deg
);
position
:
absolute
;
content
:
''
;
bottom
:
-35
px
;
right
:
-44
px
;
width
:
30
px
;
height
:
30
px
;
background-color
:
#ffffff
;
}
.R
{
position
:
relative
;
top
:
12.5
px
;
left
:
10
px
;
width
:
60
px
;
height
:
125
px
;
border-left
:
solid 16
px
#000000
;
}
.R:before
{
position
:
absolute
;
content
:
''
;
width
:
52
px
;
height
:
44
px
;
border-width
:
13
px
15
px
13
px
0
;
border-color
:
#000000
;
border-style
:
solid
;
border-radius
:
0 220
%
220
%
0
/
0 180
%
180
%
0
;
}
.R:after
{
transform
:
skew(
32
deg
,
0
);
position
:
absolute
;
content
:
''
;
bottom
:
0
;
left
:
38
px
;
width
:
18
px
;
height
:
58
px
;
background-color
:
#000000
;
}
.S
{
transform
:
rotate(
14
deg
);
position
:
relative
;
width
:
105
px
;
height
:
150
px
;
top
:
10
px
;
left
:
10
px
;
}
.S:before
{
transform
:
rotate(
18
deg
);
position
:
absolute
;
content
:
''
;
width
:
44
px
;
height
:
40
px
;
border-width
:
14
px
0 15
px
15.5
px
;
border-color
:
#000000
;
border-style
:
solid
;
border-radius
:
220
%
0 0 150
%
/
150
%
0 0 100
%
;
}
.S:after
{
transform
:
rotate(
198
deg
);
position
:
absolute
;
content
:
''
;
top
:
65
px
;
left
:
21
px
;
width
:
52
px
;
height
:
44
px
;
border-width
:
14
px
0 15
px
15
px
;
border-color
:
#000000
;
border-style
:
solid
;
border-radius
:
240
%
0 0 110
%
/
140
%
0 0 100
%
;
}
.T
{
position
:
relative
;
top
:
12.5
px
;
left
:
10
px
;
width
:
100
px
;
height
:
125
px
;
border-top
:
solid 15
px
#000000
;
}
.T:before
{
position
:
absolute
;
content
:
''
;
top
:
0
;
left
:
42
px
;
width
:
16
px
;
height
:
110
px
;
background-color
:
#000000
;
}
.U
{
position
:
relative
;
top
:
12.5
px
;
left
:
10
px
;
width
:
60
px
;
height
:
80
px
;
border-width
:
0 16
px
0 16
px
;
border-color
:
#000000
;
border-style
:
solid
;
}
.U:before
{
position
:
absolute
;
content
:
''
;
top
:
65
px
;
left
:
-16
px
;
width
:
60
px
;
height
:
45
px
;
border-width
:
0 16
px
15
px
16
px
;
border-color
:
#000000
;
border-style
:
solid
;
border-radius
:
0 0 200
%
200
%
/
0 0 300
%
300
%
;
}
.V
{
position
:
relative
;
top
:
12.5
px
;
left
:
30
px
;
width
:
59
px
;
}
.V:before
{
transform
:
skew(
18
deg
,
0
);
position
:
absolute
;
content
:
''
;
top
:
0
;
left
:
0
;
height
:
125
px
;
border-left
:
solid 16
px
#000000
;
}
.V:after
{
transform
:
skew(
-18
deg
,
0
);
position
:
absolute
;
content
:
''
;
top
:
0
;
right
:
0
;
height
:
125
px
;
border-left
:
solid 16
px
#000000
;
}
.W
{
position
:
relative
;
top
:
12.5
px
;
left
:
25
px
;
width
:
100
px
;
}
.W:before
{
transform
:
skew(
11
deg
,
0
);
position
:
absolute
;
content
:
''
;
top
:
0
;
left
:
0
;
width
:
42
px
;
height
:
125
px
;
border-width
:
0 13
px
0 15
px
;
border-color
:
#000000
;
border-style
:
solid
;
}
.W:after
{
transform
:
skew(
-11
deg
,
0
);
position
:
absolute
;
content
:
''
;
top
:
0
;
right
:
0
;
width
:
42
px
;
height
:
125
px
;
border-width
:
0 15
px
0 13
px
;
border-color
:
#000000
;
border-style
:
solid
;
}
.X
{
position
:
relative
;
top
:
12.5
px
;
left
:
50
px
;
width
:
16
px
;
height
:
125
px
;
}
.X:before
{
transform
:
skew(
32
deg
,
0
);
position
:
absolute
;
content
:
''
;
top
:
0
;
left
:
0
;
width
:
16
px
;
height
:
125
px
;
background-color
:
#000000
;
}
.X:after
{
transform
:
skew(
-32
deg
,
0
);
position
:
absolute
;
content
:
''
;
top
:
0
;
right
:
0
;
width
:
16
px
;
height
:
125
px
;
background-color
:
#000000
;
}
.Y
{
position
:
relative
;
top
:
92.5
px
;
left
:
52
px
;
width
:
16
px
;
height
:
50
px
;
background-color
:
#000000
;
}
.Y:before
{
transform
:
skew(
28
deg
,
0
);
position
:
absolute
;
content
:
''
;
top
:
-80
px
;
left
:
-21
px
;
width
:
16
px
;
height
:
80
px
;
background-color
:
#000000
;
}
.Y:after
{
transform
:
skew(
-28
deg
,
0
);
position
:
absolute
;
content
:
''
;
top
:
-80
px
;
right
:
-21
px
;
width
:
16
px
;
height
:
80
px
;
background-color
:
#000000
;
}
.Z
{
position
:
relative
;
top
:
12.5
px
;
left
:
10
px
;
width
:
90
px
;
height
:
95
px
;
border-width
:
15
px
0 15
px
0
;
border-color
:
#000000
;
border-style
:
solid
;
}
.Z:before
{
transform
:
skew(
-37
deg
,
0
);
position
:
absolute
;
content
:
''
;
top
:
0
;
left
:
36
px
;
width
:
18
px
;
height
:
95
px
;
background-color
:
#000000
;
}
用纯CSS3绘制26个英文字母
xero
：真心很不错,...不过伪元素在CSS3中推荐是两个冒号,比如 A::after {}
奥巴马
：碉堡了。。。
王晓刚
：挺6的~~受益匪浅~~~
发表回复
取消回复
您的电子邮箱地址不会被公开。
必填项已用
*
标注
评论
*
显示名称
*
网站地址
电子邮箱地址
*