在div上塑造一个棘手的形状

Question

我正在尝试在css中实现这种形状，尝试以几种不同的方式，在线查看示例，但看起来这种形状有点难以实现。 任何人都可以知道如何做到这一点？不确定是否可以使用css only技术。

谢谢！

Answer 1

是的，这是可能的，而且非常简单。

demo

<强>结果：

<强> ：

我只使用一个元素和一个伪左下角，所以 HTML 就是：

<div class='shape'></div>

相关的 CSS ：

.shape {
  overflow: hidden; /* to hide the top right corner 
                       of the parallelogram formed by the pseudo */
  position: relative;
  width: 20em; height: 10em; /* any values really */
}
.shape:before {
  position: absolute;
  bottom: 0; left: 0;
  width: 150%; height: 150%;
  transform-origin: 0 100%;
  transform: rotate(-3deg) skewX(-10deg);
  background: black;
  content: '';
}

使用CSS转换可以获得很多形状。它们是真实的形状，你可以有任何背景。

Answer 2

我认为这是你问题的完美解决方案......

#trapezoid {
 height: 0;
 width: 120px;
 border-bottom: 80px solid #05ed08;
 border-left: 45px solid transparent;
 border-right: 5px solid transparent;
 padding: 10 8px 5 5;
}

Answer 3

您还可以使用:before，:after伪和transform属性。这是一个example。

#box {
    width: 400px;
    height: 200px;
    background-color: #212121;
    position: relative;
}

#box:after, #box:before {
    display: block;
    content: "\0020";
    color: transparent;
    width: 411px;
    height: 45px;
    background: white;
    position: absolute;
    bottom: -20px;
    -moz-transform: rotate(-2deg);
    -webkit-transform: rotate(-2deg);
    -o-transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
    transform: rotate(-2deg);
}
#box:before {
    bottom: 80px;
    left: -200px;
    -moz-transform: rotate(92deg);
    -webkit-transform: rotate(92deg);
    -o-transform: rotate(92deg);
    -ms-transform: rotate(92deg);
    transform: rotate(92deg);
}

您可能需要更改某些值才能获得所需的形状。