css div 不规则形状的容器

Question

嗨，

我知道可以使用 CSS 实现所有类型的形状，但我还没有找到一个示例可以让您实际将内容放入内部，这也是可读的。我想制作一个看起来像梯形的 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

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

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
}

You can change the position of span according to your UI.

Answer 2

这是一个 fiddle，它只使用负边距工作： https://jsfiddle.net/cuvqstbo/

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

这是最快的方法。您也可以尝试使用定位，在 <div> 上使用相对定位，在 <p> 上使用绝对定位。

Answer 3

试试这个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>

Answer 4

由于所有答案都使用 2 个元素，所以让我们 post 另一个使用单个元素。使用填充使文本保持在梯形内，并使用 2 个渐变创建梯形背景

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

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

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

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

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

css div 不规则形状的容器

css div containers with irregular shapes

css

css-shapes