Question

我有一个div，我需要它在顶部和底部有一个倾斜的边框，在左边和右边有一个直的边。也应该是圆角。我不知道我是否解释清楚。

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

CSS部分是这样的：

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

这不能正常工作，边框看起来不连续。我也试过

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

但这也不行，因为左右边框也是倾斜的，我需要它们笔直。

希望有人能理解我的问题并帮助我。谢谢！

稍后编辑：我附上了一张图片，这样您就可以了解我需要它的样子。 example

Answer 1

你为什么不试试

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

Answer 2

如果你给.container边框顶部和底部但不是左右边框，它会不会起作用;和.content左右边框，但不是顶部和底部？

然后顶部和机器人边界会倾斜，而左右边界则不会你可以添加-2px的左右边距;到.content以使边界看起来是连续的。（但倾斜可能会将它们分开。）

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

半倾斜div边框

2 个答案: