html - 创建 CSS DIV 形状

Question

我研究了太多的 CSS 形状资源，这太荒谬了，但我似乎找不到我的答案。我正在尝试创建一个具有这种形状的 div，以便我可以在其中放置一行文本。

这可能吗？还是我要走另一条路，改用背景图片？

Answer 1

你可以使用 transform 3D

see (out of many other links) https://css-tricks.com/almanac/properties/p/perspective/

div.pp {
  perspective: 500px;/* triggers 3d effects */
  padding: 0 2.5%;
}
div.rt {
  perspective: inherit;/* needed to reverse 3D transform effects on content */
  height: 150px;
  background: #333;
  border-radius: 5px;
  transform: rotatex(-10deg);
  box-shadow: 0 0 1px;/* blurs the edge*/
}
.rt p {
  font-size: 5vw;
  margin: 0 3%;
  color: white;
  transform: rotatex(10deg);/* restack text up */
}

<div class="pp">
  <div class="rt">
    <p>
      some text here ?
    </p>
  </div>

</div>