在CSS中创建一个自适应四边形梯形

是否可以在 css 中创建图像形状？上周我在谷歌上搜索的次数比我愿意承认的还要多，但没有找到解决方案。

我已经能够半复制它，但还没有解决所有要求。

• 有边界
• 反应灵敏
• 适应内容高度（以厘米为单位，所以我无法控制文本量）
• 在 IE9 中工作

它需要适应内容高度并具有响应能力。

我尝试使用多个剪辑路径，但在 IE 中失败。jsfiddle http://jsfiddle.net/jwhiteford/hhbjgnyb/4/

<div class="clip-block">
  <div class="clip-wrap">
    <p class="clip-css">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>
</div>

.clip-wrap {
    display: inline-block;
    clip-path: polygon(0 22%, 120% 0, 120% 100%, 0 78%);
} 

我尝试使用 svg 来剪辑它的另一次尝试（它在 IE 中工作，但在所有其他要求中失败（例如形状内的内容））。另一个jsfiddle https://jsfiddle.net/jwhiteford/f8tcxooy/27/

<svg class="svg-defs">
  <defs>
    <clipPath id="clipping">
      <polygon points="0,50 700,0 700,300 0,250" />
    </clipPath>   
   </defs>
</svg>

<div class="wrapper">
 <div class="item--svg-clip-path-svg">
    <div class="demo">
      <svg width="1000" height="1000">
        <image xlink:href="https://placeimg.com/1000/1000/animals" width="1000" height="1000" />
      </svg>
    </div>  
  </div>
</div>


.item--svg-clip-path-svg image,
.item--svg-clip-path-html img {
    clip-path: url(#clipping);
    border: 2px solid red;
}
.svg-defs {
    position: absolute;
    width: 0;
    height: 0;
}

您可以通过 3d 变换来做到这一点：

.container{
    position: relative;
    max-width: 300px;
perspective: 500px;
padding: 20px;
}
.text{
    position: relative;
    z-index: 2;
}
.cuadrilateral{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #FBB;
    border: 3px solid #F66;
    -ms-transform: rotateY(-10deg) translateX(-5px);
    transform: rotateY(-10deg) translateX(-5px);
}

这是给你的一支笔：http://codepen.io/vandervals/pen/oXxqNX http://codepen.io/vandervals/pen/oXxqNX