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

Question

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

谢谢！

Answer 1

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

演示

结果：

：

我在左下角只使用了一个元素和一个伪元素，所以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属性。这是一个例子。

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

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