如何创建这种类型的形状，里面有文字？答案

【问题标题】：how to create this type of shape with text inside it?如何创建这种类型的形状，里面有文字？
【发布时间】：2019-07-17 17:41:36
【问题描述】：

我正在创建这种类型的形状，其中包含文本。但它不起作用，有人可以帮助我吗？

我试过这段代码：

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

&lt;div class="diagonal"&gt;&lt;span&gt;Diagonal&lt;/span&gt;&lt;/div&gt;

【问题讨论】：

我已经尝试过这个链接来制作那个形状但没有找到codepen.io/Minilexikon/pen/yVRdQY
看看这里：css-tricks.com/the-shapes-of-css 这可能会让你接近你正在寻找的东西。然后你可以添加一个 .text { display: inline-block;宽度：200px；位置：绝对；顶部：-7px；左：131px； z-index：1；白颜色; } 将您的文本放在四边形内
检查这个：stackoverflow.com/q/52455594/8620333

标签： html css

【解决方案1】：

您可以使用 clip-path 属性来实现这一点并相应地放置所有组件

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

【讨论】：