html - 创建自定义形状的 以设计 RFM 分割

Question

所以 RFM 分割看起来像这样 https://www.putler.com/wp-content/uploads/2017/05/rfm-grid.png

我想在 html 中重新创建它，其中每个 block 代表一个段。我尝试将它作为 [1,1] block 来做，但因为我想创建悬停效果。需要将多个 block 组合在一起才能产生一个整体效果。

我尝试用 div 做，但无法创建悬停效果 https://i.imgur.com/S51lu0p.png

这是 React 代码

                                  <div class="rfmBox">
                <div class="flex-container">
                    <div>5</div>
                    <div style={{ backgroundColor: "#FFC9CE" }} />
                    <div style={{ backgroundColor: "#FFEDB7" }} />
                    <div style={{ backgroundColor: "#E7F7BA" }} />
                    <div style={{ backgroundColor: "#E7F7BA" }} />
                    <div style={{ backgroundColor: "#E0ECBC" }} />
                </div>
                <div class="flex-container">
                    <div>4</div>
                    <div style={{ backgroundColor: "#FFEDB7" }} />
                    <div style={{ backgroundColor: "#FFEDB7" }} />
                    <div style={{ backgroundColor: "#E7F7BA" }} />
                    <div style={{ backgroundColor: "#E7F7BA" }} />
                    <div style={{ backgroundColor: "#E7F7BA" }} />
                </div>
                <div class="flex-container">
                    <div>3</div>
                    <div style={{ backgroundColor: "#FFEDB7" }} />
                    <div style={{ backgroundColor: "#FFEDB7" }} />
                    <div style={{ backgroundColor: "#9AF4E7" }} />
                    <div style={{ backgroundColor: "#C1FFFA" }} />
                    <div style={{ backgroundColor: "#C1FFFA" }} />
                </div>
                <div class="flex-container">
                    <div>2</div>
                    <div style={{ backgroundColor: "#CFD8E4" }} />
                    <div style={{ backgroundColor: "#F1F2F4" }} />
                    <div style={{ backgroundColor: "#B9E0E7" }} />
                    <div style={{ backgroundColor: "#C1FFFA" }} />
                    <div style={{ backgroundColor: "#C1FFFA" }} />
                </div>
                <div class="flex-container">
                    <div>1</div>
                    <div style={{ backgroundColor: "#CFD8E4" }} />
                    <div style={{ backgroundColor: "#CFD8E4" }} />
                    <div style={{ backgroundColor: "#B9E0E7" }} />
                    <div style={{ backgroundColor: "#C0ECFD" }} />
                    <div style={{ backgroundColor: "#FFEEEE" }} />
                </div>

                <div class="flex-container">
                    <div />
                    <div>1</div>
                    <div>2</div>
                    <div>3</div>
                    <div>4</div>
                    <div>5</div>
                </div>
            </div>

Answer 1

与 display: grid;你只能创建一个 <div>按区域，然后根据需要使用 grid-column 为每个区域放置它和 grid-row CSS 属性。

只需添加一些 position: relative和 z-index就是这样!

我做了一个 codepen，我试图做你想做的事情:https://codepen.io/loic/pen/ZZePXd

(我确实设置了任何 React 代码，因为我只用 html 和 css 解决了你的问题)。

希望它成功了;)