css布局实现六边形蜂窝状团队人物图像效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现六边形蜂窝状团队人物图像效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Rock+Salt&family=Permanent+Marker&display=swap'> <style> html, body { height: 100%; margin: auto; --wrp: 800px; width: var(--wrp); } body { background: center/1.6% #f5f5f5 url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="28" height="49" viewBox="0 0 28 49"%3E%3Cg fill-rule="evenodd"%3E%3Cg id="hexagons" fill="%23e5e5e5" fill-opacity="0.4" fill-rule="evenodd"%3E%3Cpath d="M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E'); background: #faf2e8; } body, .hex-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; align-content: center; } .hex-wrap { --r: 0.24935; --r-1: calc(1 / calc(1 - var(--r))); --g: 5px; --w: calc(var(--r-1) * var(--wrp) /4 - 2 * var(--r-1) * var(--g)); margin: 0 -1px; justify-content: flex-start; } .hex { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); background: center/cover #482245; color: #faf2e8; width: var(--w); height: calc(0.8658 * var(--w)); margin: var(--g) calc(var(--r) /-2 * var(--w) + var(--g)); position: relative; } .hex:nth-of-type(4n) { transform: translateY(calc(50% + var(--g))); } .hex:nth-of-type(4n + 2) { transform: translateY(calc(-50% - var(--g))); } .hex[data-h1]:before { content: attr(data-h1); font: calc(var(--w) /3) "Permanent Marker", sans-serif; position: absolute; width: 70%; text-align: left; top: 43%; left: 50%; transform: translate(-61%, -50%) rotate(-25deg); } .hex:before { position: absolute; width: 88%; text-align: inherit; top: 47%; left: 50%; transform: translate(-50%, -50%); } .hex[data-h1]:before { content: attr(data-h1); font: calc(var(--w) /3) "Permanent Marker", sans-serif; } .hex[data-h1]:before { content: attr(data-h1); font: calc(var(--w) /3) "Permanent Marker", sans-serif; transform: translate(-65%, -43%) rotate(-16deg); } .hex[data-h2]:before { width: 70%; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0