如何在其中包含文本的情况下创建这种形状？

Question

我正在创建带有文本的这种形状。但这行不通，有人可以帮我吗？

我已经尝试过此代码：

.diagonal {
  width: 300px;
  height: 100px;
  background-color: green;
  transform: skewX(30deg);
  transform-origin: top;
  margin: 10px;
  /* Zentriert den Inhalt */
  display: flex;
  justify-content: center;
  align-items: center;
}

.diagonal>span {
  transform: skewX(-30deg);
}

<div class="diagonal"><span>Diagonal</span></div>

Answer 1

您可以使用clip-path属性来实现此目的，并相应地放置所有组件

这是一个生成剪切路径的站点 clip path generator