回答編集履歴

1

質問の追記にあわせて追記

2019/08/28 09:05

投稿

Lhankor_Mhy
Lhankor_Mhy

スコア35871

test CHANGED
@@ -17,3 +17,63 @@
17
17
  高さを固定にするには、`height`を設定すればよいのでは。
18
18
 
19
19
  [height - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/height)
20
+
21
+
22
+
23
+ ### 質問の追記にあわせて追記
24
+
25
+ [サンプル](https://jsfiddle.net/Lhankor_Mhy/y3t9ks2o/)
26
+
27
+ サンプルでは不要なCSSを削っているのでご注意ください。
28
+
29
+
30
+
31
+ ---
32
+
33
+ > タイトル枠の最後以外は右端が三角の形になる。リストの最後の内容のタイトルには角が無い。
34
+
35
+
36
+
37
+ ```css
38
+
39
+ li.flex-item1:not(:last-child) h1::after {
40
+
41
+ content: '';
42
+
43
+ width: 10px;
44
+
45
+ display: block;
46
+
47
+ background:
48
+
49
+ linear-gradient(to bottom left, transparent 45%, white 50%, orange 55%) no-repeat top left/100% 50%,
50
+
51
+ linear-gradient(to top left, transparent 45%, white 50%, orange 55%) no-repeat bottom right/100% 50%;
52
+
53
+ height: 27px;
54
+
55
+ float: right;
56
+
57
+ position: relative;
58
+
59
+ right: -10px;
60
+
61
+ }
62
+
63
+ ```
64
+
65
+ ---
66
+
67
+ > 内容のボックスの高さは画像は揃えてないが揃えても問題ない。
68
+
69
+
70
+
71
+ ```css
72
+
73
+ li {
74
+
75
+ min-height:200px;
76
+
77
+ }
78
+
79
+ ```