css - 在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