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.

enter image description here

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

You could have a look at [this](http://stackoverflow.com/questions/24276968/css-gradient-help-to-create-a-slanted-div/30101253#30101253) or [this](http://stackoverflow.com/questions/30184622/trapezoid-div-in-css) 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? — Harry, May 14 '15 at 05:28

score 2 · Accepted Answer · edited May 14 '15 at 18:04

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

create an adaptive quadrilateral trapezoid in css

1 Answers1

Linked