使用 CSS 和 SVG 的菱形菜单项

Posted 2023-03-06

【中文标题】使用 CSS 和 SVG 的菱形菜单项

【英文标题】：Diamond menu items using CSS and SVG

【发布时间】：2014-12-20 15:10:47

【问题描述】：

我想用 html&CSS 编写下面的设计代码

到目前为止我所做的是：

我使用：

一个链接 SVG 作为背景 CSS 中的绝对位置和 translate(x,y) 属性。

请查看fiddle 获取实时链接

我的设计中存在的问题是：

每个项目实际上都是一个矩形，如果您注意到突出显示的 红色矩形，这是选择的区域，所以如果你悬停 在 m2 的左上角，它将选择 m3。 我想改变 悬停时SVG背景的背景颜色，如何 做到这一点？ 有没有一种理想的方法可以让这个概念变得更好？ 即使我们使用 JS 来定位元素。

点击here查看SVG形状本身。

项目的 CSS 代码：

.menu #m1 
  right: 100px;
  transform: translate(-140px, -160px);

.menu #m2 
  right: 295px;
  transform: translate(-25px, -80px);

.menu #m3 
  right: 400px;

.menu #m4 
  right: -60px;
  transform: translate(-140px, -160px);

.menu #m5 
  right: 140px;
  transform: translate(-20px, -80px);

.menu #m6 
  right: 240px;

.menu #m7 
  right: -95px;
  transform: translate(-15px, -160px);

.menu #m8 
  right: 0px;
  transform: translate(0, -80px);

谢谢，

【问题讨论】：

您可以将它们组合成 1 个 svg 吗？然后在 g 元素上添加属性，例如，您可以添加 fill="true"（我在想 d3 btw）

将它们分组为 1 个 svg 不适用于响应式设计，对吧？ g元素是什么意思？和d3？

它可能不会响应式工作。你可以将元素分组到一个 SVG 中。所以每个矩形在 svg 中都是 <g> ......具有自己的属性......并使用多边形......而不是带旋转的矩形

从你的小提琴来看，这不是 SVG

【参考方案1】：

这就是我将如何根据Responsive grid of diamonds 保持形状的边界（不需要 JS 或 svg）：

DEMO

.wrap
    width:50%;
    margin-left:13%;
    transform-origin:60% 0;
    transform: rotate(-45deg);

.wrap > a
    float:left;
    width:19%;
    padding-bottom:19%;
    margin:0.5%;
    background:teal;

.wrap > a:hover
    background:gold;

.wrap > a:nth-child(4)
    clear:left;
    margin-left:20.5%;

.wrap > a:nth-child(7)
    clear:left;
    margin-left:60.5%;

<div class="wrap">
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
</div>

要在形状中插入内容，您可以使用transform: rotate(45deg)“取消旋转”它

【讨论】：

谢谢！有没有办法让它响应？

@shadeed9 它是响应式的，在 fiddle 中调整结果窗口的宽度，您会看到菱形的大小相应地发生变化。

我的意思是重新排列钻石，在移动视图中它的尺寸太小，内容无法阅读。

@shadeed9 是的，媒体查询有可能他们应该如何处理？

@shadeed9 对不起，我没有时间这样做，但可以使用媒体查询。你可以用我提供的代码提出一个新问题，有人会帮助你。

【参考方案2】：

您需要自行旋转链接。现在，你没有旋转任何东西，你只是显示带有旋转框的图像。相反，使背景图像不旋转并使用 CSS 旋转它们。

例如：

-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(7deg);

【参考方案3】：

直接的答案是使用 SVG 的 poly 属性

那是你不依赖 CSS 来旋转它。

svg 元素一旦被绘制，在 css 改变外观后不会被操作。

在多边形中绘制一个“钻石”形状是避免边界矩形的最佳选择。

<svg  >
  <polygon points="0,25, 25,0, 50,25, 25,50 " style="fill:black" />
</svg>

基本示例

JsFiddle

更新：

您生成的代码表明它不是您正在编辑的 SVG 背景..

如果你想改变 SVG 背景，你可以按照我的排列添加属性，而不是在 CSS 中编辑。

例如，对于我处理悬停事件的选项，您需要在每个 svg 元素上都有一个 id，然后在每个元素上都需要一个 :hover，或者 javascript.. 但它只是一个选项。其他答案看起来更适用。

我的回答仅有助于在 SVG 上绘图。

【讨论】：

我没有旋转它，svg 形状就像你做的那样。我在 CSS 中所做的只是翻译它的 X 和 Y 值。

@shadeed9 你能告诉我们svg的构造函数吗？你的小提琴根本没有显示

已更新。请查看此链接：dl.dropboxusercontent.com/u/35853519/rect.svg

@shadeed9 谢谢shadeed，然后你有两个optinos，更新SVG颜色或旋转html元素，如其他答案中的建议！ :)

【参考方案4】：

您是否尝试过 css 旋转来限制矩形。无论如何，您现在都可以使用 SVG 作为背景。

.m-item 
color: white;
text-decoration: none;
text-transform: uppercase;
border: 2px solid #000;
background-color: black;
padding: 50px;
position: absolute;
transform: rotate(45deg) translate(25px);

.m-item span 
position: absolute;
transform: rotate(-45deg) translate(0, -14px);

.m-item:hover 
background-color: #AA5;

<a href="#" class="m-item"><span>m1</span></a>

【讨论】：

有趣的想法！我应用了它，但我不确定这个问题：请检查小提琴：jsfiddle.net/shadeed9/pg94fpyc/6

变换旋转刚刚被覆盖。