有没有可能用html和css制作一个不是圆形或方形的div？

我已经收到了一个设计，我很确定这是一个flash网站，但该公司相信它在html中是可行的，

---

任何反馈都很好。

为这些背景制作图像，并将它们制作为您希望在其上显示内容的div的背景图像

为这些背景制作图像，并将它们制作为您希望显示内容的div的背景图像

这确实是可行的，但如果您打算支持较旧的浏览器，如IE8，则必须使用透明的PNG图像作为元素的背景，以便在元素上创建倾斜效果

---

如果您不需要支持较旧的浏览器，您可以查看一下。

这确实是可行的，但如果您打算支持较旧的浏览器，如IE8，则必须使用透明的PNG图像作为元素的背景，以便在元素上创建倾斜效果

---

如果您不需要支持较旧的浏览器，可以查看一下。

您可以这样做吗：

   #parallelogram {
      width: 130px; 
      height: 75px;
      background: pink;
      /* Skew */
      -webkit-transform: skew(20deg); 
      -moz-transform: skew(20deg); 
      -o-transform: skew(20deg);
      transform: skew(20deg);
   }

==编辑==

好的，那么请取消文本部分：

<div style="width: 130px; 
      height: 75px;
      background: pink;
      /* Skew */
      -webkit-transform: skew(20deg); 
      -moz-transform: skew(20deg); 
      -o-transform: skew(20deg);
      transform: skew(20deg);">
    <div style=" margin:2em;
      -webkit-transform: skew(-20deg); 
      -moz-transform: skew(-20deg); 
      -o-transform: skew(-20deg);
      transform: skew(-20deg);
    ">inner text</div>
</div>

内部文本

您能这样做吗：

   #parallelogram {
      width: 130px; 
      height: 75px;
      background: pink;
      /* Skew */
      -webkit-transform: skew(20deg); 
      -moz-transform: skew(20deg); 
      -o-transform: skew(20deg);
      transform: skew(20deg);
   }

==编辑==

好的，那么请取消文本部分：

<div style="width: 130px; 
      height: 75px;
      background: pink;
      /* Skew */
      -webkit-transform: skew(20deg); 
      -moz-transform: skew(20deg); 
      -o-transform: skew(20deg);
      transform: skew(20deg);">
    <div style=" margin:2em;
      -webkit-transform: skew(-20deg); 
      -moz-transform: skew(-20deg); 
      -o-transform: skew(-20deg);
      transform: skew(-20deg);
    ">inner text</div>
</div>

内部文本

您也可以这样做：

它使用不同大小的边框来创建对角线

#left{
  position:absolute;
  border-right:200px solid #0080bf;
  border-top:500px solid transparent;
  left:-200px;
  top:0;
}

#right{
  position:absolute;
  border-left:200px solid #0080bf;
  border-bottom:500px solid transparent;
  right:-200px;
  top:0;
}

#container{
  position:relative;
  width:400px;
  height:460px;
  margin-left:250px;
  background:#0080bf;
  padding:20px;
  color: white;
}

---

这需要一点调整。在Chrome/IE8中测试并工作，您还可以执行以下操作：

它使用不同大小的边框来创建对角线

#left{
  position:absolute;
  border-right:200px solid #0080bf;
  border-top:500px solid transparent;
  left:-200px;
  top:0;
}

#right{
  position:absolute;
  border-left:200px solid #0080bf;
  border-bottom:500px solid transparent;
  right:-200px;
  top:0;
}

#container{
  position:relative;
  width:400px;
  height:460px;
  margin-left:250px;
  background:#0080bf;
  padding:20px;
  color: white;
}

这需要一点调整。经过测试并在Chrome/IE8中工作

我会使用非常通用的，不应该给你的网站增加太多的“权重”

我会使用非常通用的，不应该给你的网站增加太多的“权重”

你可以使用“剪辑路径”来塑造特殊元素。 请参阅更多信息：

您可以使用“剪辑路径”来塑造特殊元素。

---

查看更多信息：

您需要什么样的浏览器支持？您需要什么样的浏览器支持？我应该如何进行操作？@PatsyIssa一种方法是将白色和蓝色倾斜框保存为图像（透明的PNG，因此背景将能够通过盒子倾斜的地方发光，然后在元素中使用图像作为背景。我应该如何进行呢？@PatsyIssa一种方法是将白色和蓝色倾斜的盒子保存为图像（透明PNG，因此背景将能够在盒子倾斜的地方发光，然后在元素中使用图像作为背景。同意。如果这是最后一个选项，只是一个快速修复…个人虽然，我喜欢@end-user的响应！同意。如果这是最后一个选项，只是一个快速修复…个人虽然，我喜欢@end-user的响应！skewing在它的基音中扭曲了文本，在它的基音中扭曲了文本。尼斯：D，但它不“粘住”是有风险的由于每个浏览器对css的解释都略有不同，因此这是非常可靠的。我已经查看了Firefox和IE7。唯一奇怪的是IE7中的填充。实际上，没有人应该使用该浏览器：）。我发现我的方法存在的主要问题是，你无法将内容放在“左”和“右”区域，因为它们只是边界。谷歌在其音乐服务中使用了同样的技术，正如这家伙所解释的：不错：D，但它不“坚持”是有风险的由于每个浏览器对css的解释都略有不同，因此这是非常可靠的。我已经查看了Firefox和IE7。唯一奇怪的是IE7中的填充。实际上，没有人应该使用该浏览器：）。我发现我的方法存在的主要问题是，你无法将内容放在左右两个区域，因为它们只是边界。谷歌在其音乐服务中使用了同样的技术，正如这家伙所解释的：