質問編集履歴

1

試したことを追記

2017/10/03 07:49

投稿

brebre
brebre

スコア29

test CHANGED
File without changes
test CHANGED
@@ -33,3 +33,35 @@
33
33
 
34
34
 
35
35
  ![実現したい形](880fe316f72d7a0758b7862be0d3c7fb.png)
36
+
37
+
38
+
39
+
40
+
41
+ 追記
42
+
43
+ 試したこと
44
+
45
+
46
+
47
+ 4つのパーツに分けて画像を切り出し、背景として合わせました。
48
+
49
+ ブラウザの倍率やブラウザが変わるとずれが生じてしまうことから、CSSだけで実現できないか質問させていただきました。
50
+
51
+ ```css
52
+
53
+ width: 100%;
54
+
55
+ margin: 0 auto;
56
+
57
+ padding: 10px;
58
+
59
+ background: url(img/top.png), url(img/bottom.png), url(img/right.png), url(img/left.png);
60
+
61
+ background-position: top center, bottom center, center right, center left;
62
+
63
+ background-size: 100% 10px, 100% 10px, 4px 100%, 4px 100%;
64
+
65
+ background-repeat: no-repeat;
66
+
67
+ ```