我如何在CSS中制作锥形截面边框？

Question

您将如何创建如下所示的部分：？

见hwo，横幅的边框是锥形的，现在当我需要类似于我尝试过的东西并使用下面这样的东西时，它就会成为现实：

<div>

</div>

CSS：

body {
  padding: 0;
  margin: 0;
}

div {
  height: 50px;
  background: #fff;
  box-shadow: 2px 0 5px rgba(0,0,0,.3);
  position: relative;
}

div:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 120px;
    right: 20px;
    -webkit-transform: rotate(20deg);
    -ms-transform: rotateX(20deg);
    -o-transform: rotateX(20deg);
    transform: rotateZ(-5deg);
    z-index: -1;
    background: red;
}

但是我不确定在这种情况下使用同样的技巧是否会很好，因为锥形形状需要在所有宽度上都存在，并且设计需要在所有设备上相同。

那么我如何在CSS中制作锥形截面边框呢？

Answer 1

你可以做到的一种方法是将它设为require并将其与div的顶部对齐。可能不是最好的方法，但如果一切都失败了，为什么不呢？