在 css 中创建自适应四边形梯形答案

【问题标题】：create an adaptive quadrilateral trapezoid in css在 css 中创建自适应四边形梯形
【发布时间】：2015-07-25 11:33:00
【问题描述】：

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

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

有边框
反应灵敏
适应内容高度（以厘米为单位，因此我无法控制文本量）
在 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;
}

【问题讨论】：

您可以查看this 或this 的想法。第二个链接中链接的其他线程很少。顺便说一句，您只需要形状中的文本还是图像？

标签： css svg internet-explorer-9 css-shapes

【解决方案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

【讨论】：

谢谢！！这正是我想要的。