回答編集履歴
3
説明追記
answer
CHANGED
|
@@ -74,4 +74,6 @@
|
|
|
74
74
|
clip-path: polygon(0 0, 100% 0%, 100% 73%, 50% 100%, 0 73%);
|
|
75
75
|
}
|
|
76
76
|
```
|
|
77
|
-
[CodePenサンプル](https://codepen.io/hatena19/pen/GRvmpgV)
|
|
77
|
+
[CodePenサンプル](https://codepen.io/hatena19/pen/GRvmpgV)
|
|
78
|
+
|
|
79
|
+
clip-path のpolygonの設定はcss [clip-path ジェネレーター](https://bennettfeely.com/clippy/)を使うと簡単にできます。
|
2
誤字修正
answer
CHANGED
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
別案
|
|
60
60
|
---
|
|
61
61
|
疑似要素は使わずに、[clip-path](https://developer.mozilla.org/ja/docs/Web/CSS/clip-path) で切り抜くという方法もあります。
|
|
62
|
-
これだと%で設定できますので、vwを使う必要はないし、
|
|
62
|
+
これだと%で設定できますので、vwを使う必要はないし、疑似要素を使う必要もないので、シンプルになります。
|
|
63
63
|
|
|
64
64
|
```css
|
|
65
65
|
#flow .flow-left li {
|
1
コード追記
answer
CHANGED
|
@@ -54,4 +54,24 @@
|
|
|
54
54
|
幅がpxの固定なのをvw単位に変更しましたが、縦の黄色のバーも適当にvwで設定しましたので、
|
|
55
55
|
お好みで調整してください。
|
|
56
56
|
|
|
57
|
-
[CodePenサンプル](https://codepen.io/hatena19/pen/xxLdGVd?editors=0100)
|
|
57
|
+
[CodePenサンプル](https://codepen.io/hatena19/pen/xxLdGVd?editors=0100)
|
|
58
|
+
|
|
59
|
+
別案
|
|
60
|
+
---
|
|
61
|
+
疑似要素は使わずに、[clip-path](https://developer.mozilla.org/ja/docs/Web/CSS/clip-path) で切り抜くという方法もあります。
|
|
62
|
+
これだと%で設定できますので、vwを使う必要はないし、記事要素を使う必要もないので、シンプルになります。
|
|
63
|
+
|
|
64
|
+
```css
|
|
65
|
+
#flow .flow-left li {
|
|
66
|
+
margin-left: 0;
|
|
67
|
+
margin-bottom: 30px;
|
|
68
|
+
width: 80vw;
|
|
69
|
+
height: 110px;
|
|
70
|
+
color: white;
|
|
71
|
+
background-color: #414141;
|
|
72
|
+
position: relative;
|
|
73
|
+
z-index: 2;
|
|
74
|
+
clip-path: polygon(0 0, 100% 0%, 100% 73%, 50% 100%, 0 73%);
|
|
75
|
+
}
|
|
76
|
+
```
|
|
77
|
+
[CodePenサンプル](https://codepen.io/hatena19/pen/GRvmpgV)
|