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

Question

是否可以在css中创建图像形状？在过去的一周里，我在谷歌上搜索的次数比我想承认的要多，但没有找到解决办法。

​

​

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

• 有一条边界
• 有反应
• 适应内容高度(在cms中，这样我就无法控制文本的数量)
• 在IE9工作

它需要适应内容高度和响应性。

一次尝试我使用了多个剪辑路径，但在IE中失败了。小提琴

<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中工作，但在所有其他要求中失败(例如。(形状内的内容)。又一次弹琴

<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