Полу наклонная граница

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

но это тоже не нормально, потому что левая и правая границы тоже наклонены, и мне нужно, чтобы они были прямыми.

Надеюсь, кто-то может понять мою проблему и помочь мне. Спасибо.!

Позднее редактирование: я прикрепил изображение, чтобы вы могли понять, как оно должно выглядеть. пример

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