回答編集履歴
3
説明追記
test
CHANGED
|
@@ -151,3 +151,7 @@
|
|
|
151
151
|
```
|
|
152
152
|
|
|
153
153
|
[CodePenサンプル](https://codepen.io/hatena19/pen/GRvmpgV)
|
|
154
|
+
|
|
155
|
+
|
|
156
|
+
|
|
157
|
+
clip-path のpolygonの設定はcss [clip-path ジェネレーター](https://bennettfeely.com/clippy/)を使うと簡単にできます。
|
2
誤字修正
test
CHANGED
|
@@ -120,7 +120,7 @@
|
|
|
120
120
|
|
|
121
121
|
疑似要素は使わずに、[clip-path](https://developer.mozilla.org/ja/docs/Web/CSS/clip-path) で切り抜くという方法もあります。
|
|
122
122
|
|
|
123
|
-
これだと%で設定できますので、vwを使う必要はないし、
|
|
123
|
+
これだと%で設定できますので、vwを使う必要はないし、疑似要素を使う必要もないので、シンプルになります。
|
|
124
124
|
|
|
125
125
|
|
|
126
126
|
|
1
コード追記
test
CHANGED
|
@@ -111,3 +111,43 @@
|
|
|
111
111
|
|
|
112
112
|
|
|
113
113
|
[CodePenサンプル](https://codepen.io/hatena19/pen/xxLdGVd?editors=0100)
|
|
114
|
+
|
|
115
|
+
|
|
116
|
+
|
|
117
|
+
別案
|
|
118
|
+
|
|
119
|
+
---
|
|
120
|
+
|
|
121
|
+
疑似要素は使わずに、[clip-path](https://developer.mozilla.org/ja/docs/Web/CSS/clip-path) で切り抜くという方法もあります。
|
|
122
|
+
|
|
123
|
+
これだと%で設定できますので、vwを使う必要はないし、記事要素を使う必要もないので、シンプルになります。
|
|
124
|
+
|
|
125
|
+
|
|
126
|
+
|
|
127
|
+
```css
|
|
128
|
+
|
|
129
|
+
#flow .flow-left li {
|
|
130
|
+
|
|
131
|
+
margin-left: 0;
|
|
132
|
+
|
|
133
|
+
margin-bottom: 30px;
|
|
134
|
+
|
|
135
|
+
width: 80vw;
|
|
136
|
+
|
|
137
|
+
height: 110px;
|
|
138
|
+
|
|
139
|
+
color: white;
|
|
140
|
+
|
|
141
|
+
background-color: #414141;
|
|
142
|
+
|
|
143
|
+
position: relative;
|
|
144
|
+
|
|
145
|
+
z-index: 2;
|
|
146
|
+
|
|
147
|
+
clip-path: polygon(0 0, 100% 0%, 100% 73%, 50% 100%, 0 73%);
|
|
148
|
+
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
[CodePenサンプル](https://codepen.io/hatena19/pen/GRvmpgV)
|