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

Question

我试图制作一个不规则形状的DIV，但我发现实现这一目标的唯一方法是使用polygon（）函数。不幸的是，IE and FF don't support it。我不需要支持所有版本，但至少是IE，FF和Chrome的最新版本。

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

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

最终结果应如下所示：

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

我怎么能实现这个目标？

Answer 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>

Answer 2

我可能会使用SVG执行此操作，即widely supported。您还可以使用CSS transformations实现角度效果。我担心你的问题不够具体，无法邀请更详细的答案，但希望这些链接可以帮助你开始。

Answer 3

我不确定这是你想要的解决方案，但你可以通过简单地用一个不透明的角度白色区域覆盖一个png来轻松实现这一点。它在300 x 800px时仅为1.8k，我不明白为什么你不能通过一点点努力来扩展它或使其响应。

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