質問編集履歴

1

試したことを下部に書いた方が読まれた方がわかりやすいと思ったため。

2021/03/18 21:23

投稿

jmn
jmn

スコア0

test CHANGED
File without changes
test CHANGED
@@ -90,6 +90,26 @@
90
90
 
91
91
  ```
92
92
 
93
+
94
+
95
+
96
+
97
+ ### 試したこと
98
+
99
+
100
+
101
+ 個人的に思いついた事としては、下記のように
102
+
103
+ svgの中のpath内のコードを抜き取り、svgの代わりにdiv要素を置いて背景画像を指定し、それをcssでclip-pathセレクタを入れ、path(~)で、くり抜けば上手くいくかと試してみたのですが、polygonとは違って、**pathの幅がデバイス幅100%でレスポンシブにならず**上手くいきません…。※抜き取り元のsvgが横1440px×縦110pxで作ったせいか、**width:100vw;などを指定しても元の1440幅サイズで固定されてしまいます**。
104
+
105
+ 何か良い方法があるのではと解決方法を調べたのですが、どうしても見つからず、、。
106
+
107
+ もしも、構築方法自体が適切でない場合、svgやclip-path以外の方法で何かあれば教えて頂けたらと思います。
108
+
109
+ どうかよろしくお願いいたします。
110
+
111
+
112
+
93
113
  ```試したhtml
94
114
 
95
115
  <div class="flame_top">
@@ -120,22 +140,6 @@
120
140
 
121
141
 
122
142
 
123
- ### 試したこと
124
-
125
-
126
-
127
- 個人的に思いついた事としては、
128
-
129
- svgの中のpath内のコードを抜き取り、svgの代わりにdiv要素を置いて背景画像を指定し、それをcssでclip-pathセレクタを入れ、path(~)で、くり抜けば上手くいくかと試してみたのですが、polygonとは違って、**pathの幅がデバイス幅100%でレスポンシブにならず**上手くいきません…。※抜き取り元のsvgが横1440px×縦110pxで作ったせいか、**width:100vw;などを指定しても元の1440幅サイズで固定されてしまいます**。
130
-
131
- 何か良い方法があるのではと解決方法を調べたのですが、どうしても見つからず、、。
132
-
133
- もしも、構築方法自体が適切でない場合、svgやclip-path以外の方法で何かあれば教えて頂けたらと思います。
134
-
135
- どうかよろしくお願いいたします。
136
-
137
-
138
-
139
143
  ### 補足情報(FW/ツールのバージョンなど)
140
144
 
141
145