回答編集履歴

1

コード追記

2020/11/21 02:25

投稿

hatena19
hatena19

スコア34075

test CHANGED
@@ -13,3 +13,29 @@
13
13
 
14
14
 
15
15
  半角空白があることで、子要素すべてに疑似要素が追加されてそれぞれが微妙に位置が違うのでギザギザになっているのだと思われます。
16
+
17
+
18
+
19
+ 別案
20
+
21
+ ---
22
+
23
+
24
+
25
+ clip-path を使えば疑似要素を使わなくても、直接斜めに切り取れますね。
26
+
27
+
28
+
29
+ ```css
30
+
31
+ #feature-section {
32
+
33
+ background:#FFF;
34
+
35
+ clip-path: polygon(0 0, 100% 5vw, 100% 100%, 0 calc(100% - 5vw));
36
+
37
+ margin-top: -5vw;
38
+
39
+ }
40
+
41
+ ```