Question

I have a div and i need it to have a tilted border on top and bottom and a straight one on left and right.Also the corners should be rounded. I don’t know if I explained it clear.

<div class="container">
  <div class="content">
  </div>
</div>

The CSS part is like this:

.container {-moz-transform:rotate(-1deg); border-radius:25px; border:solid 0 gray; border-width:2px 0;}
.content {-moz-transform:rotate(1deg); border:solid 0 gray; border-width:0 2px;}

This doesn’t work fine, the border doesn’t look continuous. I also tried with

.container {-moz-transform:rotate(-1deg); border-radius:25px; border:solid 2px gray;}
.content {-moz-transform:rotate(1deg);}

but this is not ok either because the left and right border are tilted too and I need them to be straight.

Hope someone can understand my problem and help me. Thanks.!

Later edit: I attached an image so you can have an idea of how i need it to look like.
example

Answer 1

why don’t you try

.container{-moz-transform:skew(0deg, -1deg);}
.content{-moz-transform:skew(0deg, 1deg);}