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

Question

是否可以在css中创建图像形状？我搜索的内容超过了上周我想承认没有找到解决方案。

我已经能够半复制它但没有得到所有要求。

• 有边框
• 回应
• 适应内容高度（在cms中，因此我无法控制文本的数量）
• 在IE9中工作

它需要适应内容的高度并做出响应。

我尝试使用多个剪辑路径，但在IE中失败了。 jsfiddle

<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中工作但在所有其他要求中失败（例如，形状内的内容））。 another jsfiddle

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

Answer 1

您可以使用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