是否可以使用html和css制作一个不是圆形或方形的div？

Question

我已经收到了一个我可以肯定是Flash网站的设计，但该公司坚信它可以在html中使用， 该设计任何反馈都很好。

Answer 1

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

如果您不需要支持旧版浏览器，则可以看看CSS3 transform 。

Answer 2

为这些背景制作图像，并使它们成为您要呈现其内容的div的背景图像。

Answer 3

你能做这样的事情：

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

Answer 4

您也可以这样做： http : //jsfiddle.net/vYU7N/2/

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

#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中使用

Answer 5

我会非常灵活地使用http://raphaeljs.com/，并且不应在您的网站中添加过多的“权重”

Answer 6

您可以使用“剪切路径”来塑造特殊元素。 查看更多： https : //sarasoueidan.com/blog/css-shapes/