添付画像のようなウィンドウ幅によって表示行数とコラム数が変わるフレキシブルなリストを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件
あなたの回答
tips
プレビュー