CODEWITHSUNDEEP
htmlcssbordertilt
sticksu
sticksu

Reputation: 3738

Semi - tilted div border

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

Upvotes: 1

Views: 5326

Answers (2)

Dorel
Dorel

Reputation: 319

why don't you try 

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

Upvotes: 4

ANeves
ANeves

Reputation: 6365

Wouldn't it work if you gave .container border top and bottom, but not left and right; and .content border left and right, but not top and bottom?

Then top and bot borders would be tilted, and left and right borders would not.
You could add left and right margin of -2px; to .content so that the border looks contiguous. (The tilting might separate them, though.)

.container {
  -moz-transform:rotate(-1deg);
  border-radius:25px;
  border-top: solid 2px 0 gray;
  border-bottom: solid 2px 0 gray;
}
.content {
  -moz-transform:rotate(1deg);
  border-radius:25px;
  border-left: solid 2px 0 gray;
  border-right: solid 2px 0 gray;
  margin-left: -2px;
  margin-right: -2px;
}

Upvotes: 1

Related Questions