不规则的DIV形状，跨浏览器平台支持答案

【问题标题】：Irregular DIV shape, cross browser platform support不规则的DIV形状，跨浏览器平台支持
【发布时间】：2023-03-31 15:39:01
【问题描述】：

我正在尝试制作一个不规则形状的 DIV，但我发现完成此操作的唯一方法是使用 polygon() 函数。不幸的是，IE and FF don't support it。我不需要支持所有版本，但至少需要支持最新的 IE、FF 和 Chrome。

我想要完成的基本上是这个 - 白色和红色之间有一个黑色边框：

白色部分是导航菜单（主页、联系人、关于等），红色部分是内容，但是，我需要所有红色部分都是可点击的（意思是：我可以在任何地方放置链接并且用户可以轻松点击...）

最终结果应该是这样的：

此外，白色 div 需要保持与视口大小无关的角度，因为该网站会做出响应。

我怎样才能做到这一点？

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

让我们用transform 来制作倾斜的侧边栏：

侧边栏被指定为position: fixed，并且将保持在相对于视口的一个位置
侧边栏被赋予transform: rotate(20deg) 以旋转它并创建一个倾斜的形状
transform-origin: 100% 0% 有助于将侧边栏形状定位在我们想要的位置 (read more on transform-origin here)
侧边栏中的导航被赋予transform: rotate(-20deg)以取消文本的旋转
最大宽度/高度用于保持侧边栏大小灵活但不能太大或太小

示例

html,
body {
  margin: 0;
  background: #EEE;
}
.sidebar {
  height: 200%;
  width: 100%;
  max-width: 400px;
  min-width: 250px;
  display: block;
  background: #FFF;
  transform: rotate(20deg);
  transform-origin: 100% 0%;
  position: fixed;
  left: 0;
  top: 0;
  border-right: solid 2px #000;  
}
/*Demo purposes*/

.sidebar > nav {
  position: absolute;
  top: 100px;
  left: 30%;
  width: 300px;
  transform: rotate(-20deg);
}
.sidebar > nav > a {
  display: block;
}
.content {
  background: #CCC;
  text-align: right;
}

<div class="sidebar">
  <nav>
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
  </nav>
</div>

<div class="content">
  I am covered by the sidebar!
</div>

【讨论】：

【解决方案2】：

我不确定这是否是您想要的解决方案，但您可以通过简单地将 png 与不透明的有角度的白色区域（如附加的那个区域）重叠来轻松实现此目的。它在 300 x 800 像素时只有 1.8k，我不明白为什么您不能通过一点努力对其进行缩放或使其具有响应性。

http://zuma-design.com/shared/angle.png

【讨论】：

【解决方案3】：

我可能会使用SVG 来执行此操作，即widely supported。您还可以使用CSS transformations 实现倾斜效果。恐怕您的问题不够具体，无法提供更详细的答案，但希望这些链接能帮助您入门。

【讨论】：

您能解释一下吗？也许有一些例子。不知道如何使用这些方法获得我期望的结果。
也许这有帮助？ dropbox.com/s/xm3dfm9kqkralbp/…
感谢投反对票，真的鼓励我“阐明”。