在css中创建一个自适应四边形梯形 [英] create an adaptive quadrilateral trapezoid in css

问题描述

是否可以在css中创建图像形状？我在上周没有找到解决方案的情况下搜索这些内容。

Is it possible to create the image shapes in css? I've googled this more than I'd like to admit over the last week without finding a solution.

我已经能够半复制，但没有得到所有的要求工作出来。

I have been able to semi-replicate it but haven't gotten all the requirements worked out.

• 有边框


• 回应


• 到内容高度（以厘米为单位，因此我无法控制文字的数量）


• 在IE9中工作

• have a border
• be responsive
• adapt to content height (in a cms so I don't have control over the amount of text)
• work in IE9

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

It needs to adapt to the content height and be responsive.

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

One attempt I used multiple clip-paths but it fails in 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剪辑它的另一个尝试在所有其他要求（例如，形状内的内容））。 另一个jsfiddle

Another attempt I tried using svg to clip it (it works in IE but fails in all other requirements (eg. content within shape)). 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;
}

推荐答案

transforms：

You can do this with 3d transforms:

.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

这篇关于在css中创建一个自适应四边形梯形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！