1

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

4

6 回答 6

2

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

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

于 2012-06-14T12:55:24.260 回答
0

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

于 2012-06-14T12:55:12.107 回答
0

你能做这样的事情吗：

   #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>
于 2012-06-14T13:01:35.523 回答
0

你也可以这样做：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 中测试和工作

于 2012-06-14T13:14:48.180 回答
0

我会使用http://raphaeljs.com/非常通用，不应该给你的网站增加太多的“重量”

于 2012-06-14T13:31:37.410 回答
-1

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

于 2016-10-31T05:25:39.613 回答