Question

您好，

我知道可以使用CSS实现所有类型的形状，但我还没有找到一个允许您实际放置内容INSIDE的示例。我想制作一个看起来像梯形的div，并在其中加入一些文字：

#trapezoid {
  border-left: 25px solid transparent;
  border-radius: 10px;
  border-right: 25px solid transparent;
  border-top: 100px solid rgba(114, 230, 245, 0.3);
  height: 0;
  width: 100px;
}

此代码绘制了梯形，但我无法在梯形内放置任何东西，因为一切都低于实际形状。我该怎么办？

谢谢。

Answer 1

由于所有答案都使用了2个元素，因此请使用单个元素发布另一个元素。使用填充来保持文本在梯形内，并使用2个渐变来创建梯形的背景

＆＃13;

div {
  width: 300px;
  padding: 0px 50px;
  background-image: linear-gradient(80deg, transparent 40px, lightblue 40px), linear-gradient(-80deg, transparent 40px, lightblue 40px);
  background-size: 51% 100%;
  background-position: left bottom, right bottom;
  background-repeat: no-repeat;
}

＆＃13;

<div>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>

＆＃13;

另一个例子，有边框和阴影，但对于这个，你需要在伪元素上进行3d变换

＆＃13;

div {
  width: 400px;
  margin: 50px;
  position: relative;
}

div:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background-color: lightblue;
  border: solid 2px blue;
  z-index: -1;
  transform: perspective(200px) rotateX(-10deg);
  transform-origin: center bottom;
  border-radius: 10px;
  box-shadow: 10px 10px 10px gray;
}

＆＃13;

<div>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>

＆＃13;

Answer 2

在范围中添加文本并对齐该范围宽度位置属性

<强> HTML

<div id="trapezoid">
  <span>some text</span>
</div>

<强> CSS

#trapezoid {
  border-left: 25px solid transparent;
  border-radius: 10px;
  border-right: 25px solid transparent;
  border-top: 100px solid rgba(114, 230, 245, 0.3);
  height: 0;
  width: 100px;
  position:relative;
}
#trapezoid span{
  position:absolute;
  top:10px; // change accordingly
  left:10px; // change accordingly
}

您可以根据用户界面更改范围的位置。

Answer 3

以下是使用负边距的小提琴： https://jsfiddle.net/cuvqstbo/

#trapezoid p {
  margin-top:-80px;
}

这是最快捷的方式。您还可以尝试使用<div>上的相对定位，<p>上的绝对值。

Answer 4

试试这个Fiddle

Css：

#trapezoid {
border-left: 25px solid transparent;
border-radius: 10px;
border-right: 25px solid transparent;
border-top: 100px solid rgba(114, 230, 245, 0.3);
width: 100px;
position: relative;
}

 p{
top: 0;
position: absolute;
left: 0;
margin-top: -90px;
margin-left: -20px;
}

Html：

<div id="trapezoid">
  <p>
   fdfd
 </p>
 </div>

css div具有不规则形状的容器

4 个答案: