创建CSS DIV形状

Question

我看了很多CSS形状资源，这太荒谬了，但我似乎无法找到答案。我正在尝试使用这种形状创建一个div，以便我可以在其中放置一行文本。

这甚至可能吗？或者我是否会使用其他路线并使用背景图片？

Answer 1

您可以使用变换3D

  

请参阅（在许多其他链接中） https://css-tricks.com/almanac/properties/p/perspective/

＆＃13;

＆＃13;

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 */
}

＆＃13;

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

</div>

＆＃13;

＆＃13;

＆＃13;