Is it possible to make a div that is not rounded or square shaped with html and css?

Question

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

Answer 1

It is doable indeed, but if you intend to support older browsers, like IE8, you will have to make use of transparent PNG-images that you use as backgrounds on the elements, in order to create the tilted effect on the elements.

If you don't need to support older browsers, you can have a look att CSS3 transform .

Answer 2

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

Answer 3

Could you do something like this:

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

==edit==

Ok, so unskew the text part:

<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

You could also do something like this: http://jsfiddle.net/vYU7N/2/

It's using different sized borders to create the diagonals.

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

It takes a little bit of adjustment. Tested and works in Chrome/IE8

Answer 5

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

Answer 6

You can use "clip-path" to shape special elements. See more: https://sarasoueidan.com/blog/css-shapes/