CSS trapezoid shape with text

问题

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).

回答1:

If the width/height of the trapezoid shape should be changed dynamically, you could achieve the effect by using CSS transforms 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.

来源：https://stackoverflow.com/questions/26000995/css-trapezoid-shape-with-text