CODEWITHSUNDEEP
csssvginternet-explorer-9css-shapes
Jere.me
Jere.me

Reputation: 301

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.

enter image description here

I have been able to semi-replicate it but haven't gotten all the requirements worked out.

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

Upvotes: 3

Views: 1435

Answers (1)

Vandervals
Vandervals

Reputation: 6064

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

Upvotes: 2

Related Questions