1

我有一个 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);}

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

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

稍后编辑：我附上了一张图片，以便您了解我需要它的外观。 例子

4

2 回答 2

4

你为什么不试试

.container{-moz-transform:skew(0deg, -1deg);}
.content{-moz-transform:skew(0deg, 1deg);}
于 2011-10-17T10:11:25.550 回答
1

如果你给.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;
}
于 2011-10-17T08:48:17.503 回答