Result
flexboxでハニカム構造なレイアウトです
ヘキサゴンブロックを並べてRWDに対応したもの
css
.honeycomb { display: flex; flex-wrap: wrap; list-style: none; justify-content: center; align-items: center; max-width: 1200px; margin: 0 auto; padding: 0; transform: translateY(34.375px);}.honeycomb-cell { flex: 0 1 250px; max-width: 250px; height: 137.5px; margin: 65.4761904762px 12.5px 25px; position: relative; padding: 0.5em; text-align: center; z-index: 1;}.honeycomb-cell__image { object-fit: cover; object-position: center;}.honeycomb-cell::before, .honeycomb-cell::after { content: '';}.honeycomb-cell::before, .honeycomb-cell::after, .honeycomb-cell__image { top: -50%; left: 0; width: 100%; height: 200%; display: block; position: absolute; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); z-index: -1;} |
レイアウトに関わる部分だけ抜粋しています
html
<ul class="honeycomb" lang="es"> <li class="honeycomb-cell"> <img class="honeycomb-cell__image" src="https://picsum.photos/200/300"> <div class="honeycomb-cell__title">01</div> </li> <li class="honeycomb-cell"> <img class="honeycomb-cell__image" src="https://picsum.photos/200/301"> <div class="honeycomb-cell__title">02</div> </li>・・・</ul> |
