JSDM

HTML

 
1
<div class="hammer">
2
  <div class="head">
3
    <div class="rune"></div>
4
  </div><!--end top-->
5
  <div class="handle"></div>
6
  <div class="hilt"></div>
7
</div><!--end hammer-->
8
9
<p>Because, Vikings.</p>

CSS

xxxxxxxxxx
111
 
1
p {
2
  font-family: helvetica;
3
  text-align: center;
4
  font-size: 12px;
5
  padding: 0;
6
  margin: 0;
7
  margin-top: -20px;
8
}
9
10
.hammer {
11
  margin:50px auto;
12
  height: 165px;
13
  width: 120px;
14
}
15
16
.head {
17
  margin-left:10px;
18
  height: 65px;
19
  width: 100px;
20
  background: #CFCFCF;
21
}
22
23
.head::before {
24
  content: "";
25
  position: absolute;
26
  height: 45px; 
27
  border-top: 10px solid transparent;
28
  border-bottom: 10px solid transparent; 
29
  border-right:10px solid #E8E8E8;
30
  margin-left: -10px;
31
}
32
33
.head::after {
34
  content: "";
35
  position: absolute;
36
  height: 45px; 
37
  border-top: 10px solid transparent;
38
  border-bottom: 10px solid transparent;
39
  border-left: 10px solid #A8A8A8;
40
  margin-left:100px;
41
}
42
43
.head .rune {
44
  background: url('http://upload.wikimedia.org/wikipedia/commons/thumb/2/23/Odal_rune.svg/350px-Odal_rune.svg.png');
45
  background-size: cover;
46
  opacity: .3;
47
  height: 50px;
48
  width: 50px;
49
  margin-left: 25px;
50
  margin-top: 5px;
51
  position: absolute;
52
}
53
54
.head .rune::before {
55
  content: "";
56
  position: absolute;
57
  margin-top: -5px;
58
  margin-lefT: 25px;
59
  height: 65px;
60
  width: 50px;
61
  background: rgba(0,0,0,.3)
62
} 
63
64
.head .rune::after {
65
  content: "";
66
  position: absolute;
67
  margin-top: 60px;
68
  margin-lefT: 25px;
69
  height: 75px;
70
  width: 10px;
71
  background: rgba(0,0,0,.3);
72
}
73
74
.handle {
75
  height: 75px;
76
  width: 18px;
77
  background: #B39370;
78
  margin-left: 52px;
79
}
80
81
.handle::before {
82
  
83
}
84
85
.hilt {
86
  width: 18px;
87
  border-left: 2px solid transparent;
88
  border-right: 2px solid transparent;
89
  border-bottom: 18px solid #CFCFCF;
90
  margin-left: 50px;
91
}
92
93
.hilt::before {
94
  content: "";
95
  position: absolute;
96
  width: 18px;
97
  border-left: 2px solid transparent;
98
  border-right: 2px solid transparent;
99
  border-top: 5px solid #c9c9c9;
100
  margin-top: 18px;
101
  margin-left: -2px;
102
}
103
104
.hilt::after {
105
  content: "";
106
  position: absolute;
107
  width: 10px;
108
  border-right: 2px solid transparent;
109
  border-bottom: 18px solid rgba(0,0,0,.1);
110
  margin-left: 8px;
111
}
? ?
? ?
必须是有效的URL
+ 添加另一个资源

JS

xxxxxxxxxx
1
 
1
必须是有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

  1. 暂无文件
拖动文件到上面的区域或者:
加载中 ..................