JSDM

HTML

6
1
<div class="banner">
2
  <div class="ribbon"></div>
3
  <div class="ribbon"></div>
4
  <div class="ribbon"></div>
5
  <div class="ribbon"></div>
6
</div>

CSS

x
 
1
.banner {
2
  width: 400px;
3
  margin: 50px auto;
4
}
5
6
.ribbon {
7
  float: left;
8
  height: 200px;
9
  width: 60px;
10
  transform: skew(20deg);
11
  margin-left: 33px; 
12
}
13
14
.ribbon::before {
15
  content: "";
16
  position: absolute;
17
  height: 200px;
18
  width: 60px;
19
  transform: skew(-25deg);
20
  margin-left: -46px;
21
}
22
23
.ribbon:first-child::after {
24
  content: "";
25
  position: absolute;
26
  float: left;
27
  height: 200px;
28
  width: 60px;
29
  background: #2D4D66; 
30
  transform: skew(0deg);
31
  margin-left: -93px;
32
  z-index: -1;
33
}
34
35
.ribbon:first-child {
36
  background:  #6B3E55;
37
}
38
39
.ribbon:first-child::before {
40
  background: #8B506E;
41
}
42
43
.ribbon:nth-child(2) {
44
  background: #AD4966;
45
}
46
47
.ribbon:nth-child(2)::before {
48
  background: #D6497D;
49
}
50
51
.ribbon:nth-child(3) {
52
  background: #CA8768;
53
}
54
55
.ribbon:nth-child(3)::before {
56
  background: #F28781;
57
}
58
59
.ribbon:nth-child(4) {
60
  background: #B8AA77;
61
}
62
63
.ribbon:nth-child(4)::before {
64
  background: #D6C68B;
65
}
? ?
? ?
必须是有效的URL
+ 添加另一个资源

JS

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

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

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