create an adaptive quadrilateral trapezoid in css

Question

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

Guiscard

You could have a look at this or this for ideas. There are few other threads linked within the second link. By the way, do you need only text within the shape or an image also? – Window

Answer 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

Ginny