容器内的流程段向两边倾斜

Question

我想做的是：在一个倾斜的容器内填充多行文字，使其成为一个平行四边形。我还想让内容能够上下滚动。

我所能做到的就是。

我还想使用媒体查询在移动设备上无斜度地显示它。

这是我采取的方法，完整的代码在 编码笔.

@media (min-width: 480px) {
  #scroller {
    transform: skew(-30deg);
  }

  #content > .unskew {
    transform: skew(30deg);
  }

  .contentMargin {
    width: 100%;
    height: 45vh;
  }

  p {
    transform: skew(30deg);
  }
}

Answer 1

你可以尝试形状外的这个。

.container {
  height: 100vh;
  min-height: 600px;
  font-size: 25px;
  color: #fff;
  text-align: justify;
}

.container>div {
  height: 100%;
}

.container::before,
.container>div::before {
  content: "";
  height: 100%;
  width: 30%;
  float: left;
  shape-outside: linear-gradient(to bottom right, #fff 49%, transparent 50%);
  background: linear-gradient(to bottom right, #000 40%, #fff 40.5% 49.5%, transparent 50%)
}

.container>div::before {
  float: right;
  shape-outside: linear-gradient(to top left, #fff 49%, transparent 50%);
  background: linear-gradient(to top left, #000 40%, #fff 40.5% 49.5%, transparent 50%)
}

h1 {
  margin: 0;
  padding: 20px 0;
}

@media all and (max-width:600px) {
  .container::before,
  .container>div::before {
    content: none;
  }
}

body {
  margin: 0;
  background: grey;
}

<div class="container">
  <div>
    <h1>Title </h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec elit nisi. Sed a mi vel mi auctor vehicula id molestie turpis. Praesent et sem mattis, efficitur nisi at, mattis sapien. Mauris sit amet lacus ante. Aliquam erat volutpat. Maecenas massa
      orci, cursus sed maximus maximus, sollicitudin sed justo</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec elit nisi. Sed a mi vel mi auctor vehicula id molestie turpis. Praesent et sem mattis, efficitur nisi at, mattis sapien. Mauris sit amet lacus ante. Aliquam erat volutpat. Maecenas massa
      orci, cursus sed maximus maximus, sollicitudin sed justo</p>
  </div>
</div>

Answer 2

看成 CSS 形状. 使用polygon()可以让形状变得更加复杂，这里是你需要的小例子。

.shape {
  width: 60px;
  height: 80px;
  shape-outside: polygon(90% 0, 100% 0, 10% 100%, 0 100%);
  float: left;
}

<div class="container">
  <div class="text">
    <div class="shape"></div>
    text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
  </div>
</div>