小编gho*_*013的帖子

我正在尝试创建一个菜单，其中包含一起形成一个正方形的直角三角形。这是我的构想：

这是我希望实现的目标：

• 可以通过javascript动态生成。
• 缩放到父级
• 裁剪图像作为每个三角形的背景（不能是CSS）
• 链接到每个三角形的网站
• 悬停时更新背景和文本颜色
• 支持多种浏览器

我尝试了几种不同的方法，但是每种方法都遇到了几个问题：

• CSS hack：
  • 无法将文字设置为正确的位置
  • 无法单独设置边框
• SVG
  • 悬停时无法更新颜色。我最近的人在这里：https : //jsfiddle.net/71xp6r0s

    <div class="menu-box">
    <svg id="menu" style="border: black solid 1px" width="100" height="100" viewbox="0, 0, 100, 100">
      <polygon class = "top" points='0,0 0,100 100,0'  fill="none" stroke="red"/>
      <text x="-18" y="68" fill="black" transform="rotate(-45)">Item</text>
      <polygon  points='100,0 100,100 0,100'  fill="none" stroke="red" />
        <text x="-18" y="84" fill="black" transform="rotate(-45)">Item</text>
    </svg>
    </div>

• 帆布
  • 难以动态调整为父级
• 剪辑路径：
  • 大多数浏览器均不支持。

我知道这很雄心勃勃，但是可以提供任何帮助。我也对其他想法持开放态度，但是这些都是我在网上找到的。

编辑：切换到更好的图像

是否有更简单的方法来删除FlowLayout中第一个组件前面的水平空间？

这基本上就是我的代码:

JPanel panel = new JPanel(new FlowLayout(FlowLayout.LEFT, 5, 0));
JLabel label1 = new JLabel("Hello");
JLabel label2 = new JLabel("Goodbye");
panel.add(label1);
panel.add(label2);

我看到的是label1和label2之间存在水平间隙,但是,它还在label1前面添加了间距.我目前的解决方案是删除水平间隙并将一个EmptyBorder添加到label2以解决此问题.

但对于有许多组件的情况,我想知道是否有更简单有效的方法来做这么简单的事情？