CSS trapezoid shape with text

Question

I don't know if this is possible with CSS but it's worth asking.

I want to have a trapezoid shape be transparent in the middle (hollow) with formatted text inside of it (and a small image as well). It also has to be responsive. Here is a mockup of what I mean:

Is this posible with CSS? I know how to make a trapezoid shape but I haven't figured out how to get text inside it and have it be hollow (only the outline of the shape).

Answer 1

If the width / height of the trapezoid shape should be changed dynamically, you could achieve the effect by using CSS transform s as follows:

 .box { width: 300px; /* optional - feel free to remove it */ /* height: 150px; */ /* optional - feel free to remove it */ position: relative; padding: 5px; } .box:before { content: ""; position: absolute; border: 3px solid teal; top: -4%; bottom: -11%; left: -3%; right: -3%; z-index: -1; -webkit-transform: perspective(50em) rotateX(-30deg); transform: perspective(50em) rotateX(-30deg); } 

 <div class="box"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus sed unde voluptate non temporibus quae amet possimus dolorum quisquam atque nemo reprehenderit quasi suscipit vero cum delectus quibusdam optio asperiores. </div> 

However this method is not supported in IE9 and older.