create an adaptive quadrilateral trapezoid in 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.

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.

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

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

回答1:

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

and here is a pen for you: http://codepen.io/vandervals/pen/oXxqNX

来源：https://stackoverflow.com/questions/30227367/create-an-adaptive-quadrilateral-trapezoid-in-css

标签

css

css3

svg

internet-explorer-9

css-shapes