CSS - 创建复杂的形状

Question

有没有简单的方法使用CSS来制作这个形状？

Answer 1

是的，可以做到。见下面的代码。

＆＃13;

＆＃13;

.shape {
    width: 200px;
    height: 100px;
    background: #000;
    margin: 20px 150px;
    position: relative;
}

.shape:after {
        content: '';
    line-height: 0;
    font-size: 0;
    width: 0;
    height: 0;
    border-top: 50px solid #000000;
    border-bottom: 50px solid #fff;
    border-left: 50px solid #000000;
    border-right: 50px solid #fff;
    position: absolute;
    top: 0;
    right: -99px;
}

.shape:before {
        content: '';
    line-height: 0;
    font-size: 0;
    width: 0;
    height: 0;
    border-top: 50px solid #000000;
    border-bottom: 50px solid #fff;
    border-left: 50px solid #fff;
    border-right: 50px solid #000000;
    position: absolute;
    top: 0;
    left: -99px;
}

＆＃13;

<div class="shape"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用rotateX()和perspective()创建这样的形状。

.shape {
  width: 250px;
  height: 70px;
  border: 2px solid black;
  border-top: 1px solid black;
  margin: 50px;
  transform: perspective(10px) rotateX(-2deg);
}

<div class="shape"></div>