css - div 向 2 个方向倾斜

Question

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

浏览器支持并不重要。

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

Answer 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 坐标是底部，所以形状的底部将保持笔直，元素右侧的任何高度增加都将向上投影，导致形状超出屏幕。

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

---

有问题的形状与此处讨论的形状并不完全相同，但您可以通过查看它来获得更多想法:)

Answer 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和:afterCSS。提琴手。