回答編集履歴
1
コード追記
answer
CHANGED
|
@@ -5,4 +5,17 @@
|
|
|
5
5
|
|
|
6
6
|
`#feature-section::after {`
|
|
7
7
|
|
|
8
|
-
半角空白があることで、子要素すべてに疑似要素が追加されてそれぞれが微妙に位置が違うのでギザギザになっているのだと思われます。
|
|
8
|
+
半角空白があることで、子要素すべてに疑似要素が追加されてそれぞれが微妙に位置が違うのでギザギザになっているのだと思われます。
|
|
9
|
+
|
|
10
|
+
別案
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
clip-path を使えば疑似要素を使わなくても、直接斜めに切り取れますね。
|
|
14
|
+
|
|
15
|
+
```css
|
|
16
|
+
#feature-section {
|
|
17
|
+
background:#FFF;
|
|
18
|
+
clip-path: polygon(0 0, 100% 5vw, 100% 100%, 0 calc(100% - 5vw));
|
|
19
|
+
margin-top: -5vw;
|
|
20
|
+
}
|
|
21
|
+
```
|