Q&A
現状のコードと問題点はどこか？が提示されないと「丸投げ」と低評価される可能性があります。
添付画像のようなウィンドウ幅によって表示行数とコラム数が変わるフレキシブルなリストをCSSで作りたいのですが、
以下のポイントでどう記述すれば実現できるか思いつかずどなたかアイディアをいただけると嬉しいです。
・タイトル枠の最後以外は右端が三角の形になる。リストの最後の内容のタイトルには角が無い。
・内容のボックスの高さは画像は揃えてないが揃えても問題ない。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>list test</title> <style> li.flex-item1 h1:first-child { padding-left: 1em; border-radius: 5px 0 0 5px; } li.flex-item1 h1::after, li.flex-item1 h1::before { position: absolute; top: 50%; right: -1.5em; margin-top: -1.48em; content: ''; border-top: 1.48em solid transparent; border-bottom: 1.48em solid transparent; border-left: 1.5em solid; } ul { display: flex; padding:0; margin:0; list-style: none; min-width:200px; flex-wrap: wrap; display: flex; flex-direction: row; justify-content: center; align-items: stretch; align-items: flex-start; } li { padding:0; margin:0; background-color:lightgrey; } h1.flex-title{ font-size:110%; background-color: orange; padding:0; margin:0; } .flex-item1 { margin-bottom:20px; } </style> </head> <body> <ul> <li class="flex-item1"> <h1 class="flex-title">Title 1</h1> xxxxxxxxxxxx</br> xxxxxxxxxxx</br> xxxxxxxxxxxxxxxxx</li> <li class="flex-item1"> <h1 class="flex-title">Title 2</h1> xxxxxxxxxxx</li> <li class="flex-item1"> <h1 class="flex-title">Title 3</h1>xxxxxxxxxxx</li> <li class="flex-item1"> <h1 class="flex-title">Title 1</h1> xxxxxxxxxxx</li> <li class="flex-item1"> <h1 class="flex-title">Title 2</h1> xxxxxxxxxxx</li> <li class="flex-item1"> <h1 class="flex-title">Title 3</h1>xxxxxxxxxxx</li> </ul> </body> </html>
回答1件
0
ベストアンサー
タイトル枠の最後以外は右端が三角の形になる。リストの最後の内容のタイトルには角が無い。
最後だけにスタイルを設定するには、:last-childを使うといいでしょう。
:last-child - CSS: カスケーディングスタイルシート | MDN
内容のボックスの高さは画像は揃えてないが揃えても問題ない。
高さを固定にするには、heightを設定すればよいのでは。
height - CSS: カスケーディングスタイルシート | MDN
質問の追記にあわせて追記
サンプル
サンプルでは不要なCSSを削っているのでご注意ください。
タイトル枠の最後以外は右端が三角の形になる。リストの最後の内容のタイトルには角が無い。
css
1 li.flex-item1:not(:last-child) h1::after { 2 content: ''; 3 width: 10px; 4 display: block; 5 background: 6 linear-gradient(to bottom left, transparent 45%, white 50%, orange 55%) no-repeat top left/100% 50%, 7 linear-gradient(to top left, transparent 45%, white 50%, orange 55%) no-repeat bottom right/100% 50%; 8 height: 27px; 9 float: right; 10 position: relative; 11 right: -10px; 12 }
内容のボックスの高さは画像は揃えてないが揃えても問題ない。
css
1 li { 2 min-height:200px; 3 }
投稿2019/08/28 01:27
編集2019/08/28 09:05
総合スコア36074
あなたの回答
tips
プレビュー
