回答編集履歴
1
コード追記
test
CHANGED
|
@@ -22,6 +22,36 @@
|
|
|
22
22
|
|
|
23
23
|
```
|
|
24
24
|
|
|
25
|
+
SVGを使うとさらにましになりました。
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
```html
|
|
30
|
+
|
|
31
|
+
<div class="box3">
|
|
32
|
+
|
|
33
|
+
box3
|
|
34
|
+
|
|
35
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="80%" height="20px">
|
|
36
|
+
|
|
37
|
+
<defs>
|
|
38
|
+
|
|
39
|
+
<pattern id="pattern_XlHnq" patternUnits="userSpaceOnUse" width="4.5" height="4.5" patternTransform="rotate(45)">
|
|
40
|
+
|
|
41
|
+
<line x1="0" y="0" x2="0" y2="4.5" stroke="#707070" stroke-width="1" />
|
|
42
|
+
|
|
43
|
+
</pattern>
|
|
44
|
+
|
|
45
|
+
</defs>
|
|
46
|
+
|
|
47
|
+
<rect width="100%" height="100%" fill="url(#pattern_XlHnq)" :opacity="1" />
|
|
48
|
+
|
|
49
|
+
</svg>
|
|
50
|
+
|
|
51
|
+
</div>
|
|
52
|
+
|
|
53
|
+
```
|
|
54
|
+
|
|
25
55
|
|
|
26
56
|
|
|
27
57
|
[Codepenサンプル](https://codepen.io/hatena19/pen/xxVGxQN)
|