Question

是否可以在 CSS 中将DIV创建为{{1}}。

浏览器支持并不重要。

slanted div in 2 directions

Answer 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/。请注意包装纸上的填充底部，它定义了比率。您可能需要使用百分比金额。

#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的示例，该示例也可以轻松扩展。文本（如果需要）可以绝对定位在形状的顶部。

＆＃13;

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

＆＃13;

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

＆＃13;

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

使用CSS和单个元素：

CSS也只使用一个元素就可以实现相同的形状。关键是将transform-origin设置为需要直线的一面。

＆＃13;

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

＆＃13;

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

＆＃13;

使用此方法实现的形状也可以缩放。然而，随着形状的高度增加，右侧变得更高并且将右上角推得更高。因此，要么需要减小旋转角度（或）需要增加透视角度（需要将形状移动得更远），使得右侧的高度保持足够小并且在观察区域内。否则，应该增加保证金顶部。

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

考虑一个位于观察者眼前300px的矩形。它正向观察者旋转，随着旋转的发生，越靠近用户的一侧出现高于另一侧。
我们已将变换原点的x坐标固定为0%，因此形状左侧的高度将保持不变，右侧的高度将根据旋转角度保持增加。
因为变换原点＆sy; sy坐标是底部，所以形状的底边将保持笔直，并且元素右侧的任何高度增加都将向上投影，从而导致形状出现在屏幕之外。

如果仅因为旋转角度太小而宽度增加而没有这样的问题，那么形状的右侧将永远不会到达观察者看得很高的任何地方。

有问题的形状与所讨论的形状不完全相同here但你可以通过观察它来获得更多的想法：）

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和:after CSS。 JsFiddle

div向两个方向倾斜

3 个答案: