создать адаптивную четырехугольную трапецию в css

Question

Можно ли создать фигуры изображений в css? Я искал это больше, чем я хотел бы признать за последнюю неделю, не найдя решения.

Я был в состоянии полу-повторить его, но не получили все требования разработаны.

• имеет границы
• реагировать
• адаптироваться к высоте контента (через СЕ, так что я не иметь контроля над количеством текста)
• работы в IE9

Он должен адаптироваться к высоте контента и быть отзывчивым.

Одна попытка Я использовал несколько клипов, но в 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, чтобы закрепить его (он работает в IE, но не во всех других требований (например, содержание в форме)). 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

Вы можете сделать это с помощью 3D-преобразования:

.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