Create responsive quadrangular trapezoid in css

Question

Is it possible to create image shapes in css? I searched for it more than I would have recognized in the last week without finding a solution.

I was able to half-repeat it, but did not receive all the developed requirements.

• have a border
• be responsive
• adapt to the content height (in cms, so that I do not control the amount of text)
• work in IE9

It must adapt to the height of the content and be responsive.

One attempt I used several clips, but in IE failed. 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 that I tried to use svg to click it (it works in IE, but does not work in all other requirements (for example, the contents inside the form)). 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

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 the pen for you: http://codepen.io/vandervals/pen/oXxqNX