div 向 2 个方向倾斜答案

【问题标题】：div slanted in 2 directionsdiv 向 2 个方向倾斜
【发布时间】：2013-11-13 15:58:34
【问题描述】：

是否可以在 CSS 中将以下形状创建为 DIV。

浏览器支持并不重要。

【问题讨论】：

这可以通过在 CSS 中叠加三角形（只有一个 div 和 2 个子 divs）来实现。我在对类似问题的回答中描述了如何做到这一点。 stackoverflow.com/a/31626849/3597276

标签： css svg css-shapes css-transforms

【解决方案1】：

您不能像这样直接倾斜元素，您需要使用两个元素（或生成的内容）并隐藏某些溢出以使底部边缘平坦：

http://jsfiddle.net/6DQUY/1/

#skew {
    height: 240px;
    overflow: hidden;
}
.skew {
    background: #000;
    display: inline-block;
    height: 300px;
    width: 500px;
    margin-top: 100px;
    transform: skew(-8deg, -8deg);
}

注意：为了更好的可读性，我删除了跨浏览器定义。

更新：这将是一个更流畅的示例，它在设置尺寸中调整大小：http://jsfiddle.net/6DQUY/3/。请注意定义比率的包装器上的 padding-bottom。您可能不得不考虑百分比金额。

#skew {
    padding-bottom: 20%;
    overflow: hidden;
    position: relative;
}
.skew {
    background: #000;
    position: absolute;
    top: 30%;
    right: 8%;
    left: 8%;
    height: 100%;
    transform: skew(-8deg, -8deg);
}

【讨论】：

这太棒了，但它需要固定值吗？是否可以按百分比来实现它可以响应地扩展
我没有深入优化这个例子，但我想在某些限制条件下是可能的。

【解决方案2】：

使用 SVG：

下面是一个使用 SVG polygon 的示例，它也可以轻松缩放。文本（如果需要）可以绝对定位在形状的顶部。

.shape-svg {
  position: relative;
  height: 100px;
  width: 300px;
}
svg {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}
polygon {
  fill: black;
}

/* Just for demo*/

.shape-svg{
  transition: all 1s;
}
.shape-svg:hover {
  height: 200px;
  width: 600px;
}

<div class="shape-svg">
  <svg viewBox='0 0 100 100' preserveAspectRatio='none'>
    <polygon points='5,35 100,0 95,100 0,100' />
  </svg>
</div>

也可以使用 SVG 剪辑路径而不是多边形来创建形状。

使用 CSS 和单元素：

同样的形状也可以通过 CSS 实现，只使用一个元素。关键是将transform-origin设置为需要笔直的边。

.shape{
  height: 100px;
  width: 300px;
  margin-top: 50px;
  background: black;
  transform-origin: 0% bottom;
  transform: perspective(300px) rotateY(-15deg) skewX(-10deg);
  transition: all 1s;
}
.shape:hover{
  width: 350px;
  height: 150px;
  transform: perspective(450px) rotateY(-15deg) skewX(-10deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="shape"></div>

使用这种方法获得的形状也可以缩放。然而，随着形状高度的增加，右侧变得更高，并将右上角推得更高。因此，要么需要减小旋转角度（或者）需要增加视角（需要将形状移得更远），以使右侧的高度保持足够小并在可视区域内。否则，margin-top 应该增加。

下面解释为什么会发生这种情况：

考虑一个位于观察者眼前 300 像素的矩形。它正朝着观看者旋转，随着旋转的发生，离用户越来越近的一侧将显得比另一侧高。
我们已将变换原点的 x 坐标固定为0%，因此形状左侧的高度将保持不变，而右侧的高度将根据旋转角度不断增加。
因为变换原点的 y 坐标是底部，所以形状的底部将保持笔直，元素右侧的任何高度增加都会向上投影，导致形状超出屏幕。

如果只增加宽度就不会出现这样的问题，因为旋转角度太小，所以形状的右侧永远不会靠近观察者看起来很高。

所讨论的形状与here 讨论的形状并不完全相同，但您可以通过查看它获得更多想法：)

【讨论】：

另一种方法是使用像here 这样的渐变，但它们会在顶部产生锯齿状边缘。

【解决方案3】：

您可以查看 CSS 转换 (transform) 我创建了一个 JsFiddle 并带有一个简单的示例。

HTML

<div class="skew"></div>

CSS

/* Skew the container one way */
.skew {
    background: #000;
    display: inline-block;
    height: 50px;
    width: 500px;
    margin-top: 100px;
    -webkit-transform: skewY(-5deg);
    -moz-transform: skewY(-5deg);
    -ms-transform: skewY(-5deg);
    -o-transform: skewY(-5deg);
    transform: skewY(-5deg);
}

注意：

您可能需要包含其他转换才能获得不平衡的外观。

--编辑--

这是另一种解决方案，但使用 :before 和 :after CSS。 JsFiddle.

【讨论】：