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

Question

我收到了一个设计，我很确定这是一个Flash网站，但该公司确信它在html中是可行的，设计任何反馈都会很好。

Answer 1

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

如果你不需要支持较旧的浏览器，你可以看看CSS3转换。

Answer 2

为

这些背景制作图像，并使其成为您希望在其上显示内容的div的背景图像。

Answer 3

你也可以做这样的事情： 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 4

我会使用 http://raphaeljs.com/非常通用的，不应该给您的网站增加太多的"权重"

Answer 5

你能

做这样的事情吗：

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

您可以使用"剪辑路径"来塑造特殊元素。另请参阅： https://sarasoueidan.com/blog/css-shapes/