CSS与文本的梯形 [英] CSS trapezoid shape with text

问题描述

我不知道这是否可能与CSS，但它是值得问。

我想有一个在其中有格式文本的中间（空心）和一个小的图像透明的梯形。它也必须响应。这里是我的意思模型：

这是否适合CSS？我知道如何做一个梯形的形状，但我还没有想出如何得到文本内部，它是中空的（只有形状的轮廓）。

解决方案

如果 width / height 的梯形应动态更改，您可以通过使用 CSS transform 如下：

  .box {width：300px; / *可选 - 随意删除它* / / * height：150px; * / / *可选 - 随意删除它* / position：relative; padding：5px;}。box：before {content：; position：absolute; border：3px solid teal;顶部：-4％;底部：-11％;左：-3％;右：-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。 < / div>  

>

>

但是IE9及更旧版本不支持此方法。

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

解决方案

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.

这篇关于CSS与文本的梯形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！