teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

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

2019/08/28 09:05

投稿

Lhankor_Mhy
Lhankor_Mhy

スコア37488

answer CHANGED
@@ -7,4 +7,34 @@
7
7
  > 内容のボックスの高さは画像は揃えてないが揃えても問題ない。
8
8
 
9
9
  高さを固定にするには、`height`を設定すればよいのでは。
10
- [height - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/height)
10
+ [height - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/height)
11
+
12
+ ### 質問の追記にあわせて追記
13
+ [サンプル](https://jsfiddle.net/Lhankor_Mhy/y3t9ks2o/)
14
+ サンプルでは不要なCSSを削っているのでご注意ください。
15
+
16
+ ---
17
+ > タイトル枠の最後以外は右端が三角の形になる。リストの最後の内容のタイトルには角が無い。
18
+
19
+ ```css
20
+ li.flex-item1:not(:last-child) h1::after {
21
+ content: '';
22
+ width: 10px;
23
+ display: block;
24
+ background:
25
+ linear-gradient(to bottom left, transparent 45%, white 50%, orange 55%) no-repeat top left/100% 50%,
26
+ linear-gradient(to top left, transparent 45%, white 50%, orange 55%) no-repeat bottom right/100% 50%;
27
+ height: 27px;
28
+ float: right;
29
+ position: relative;
30
+ right: -10px;
31
+ }
32
+ ```
33
+ ---
34
+ > 内容のボックスの高さは画像は揃えてないが揃えても問題ない。
35
+
36
+ ```css
37
+ li {
38
+ min-height:200px;
39
+ }
40
+ ```