Html 如何使用CSS创建梯形按钮？

我想创建上面的图像使用CSS，使用它作为一个按钮，把文本放在上面

按钮尺寸：宽180px，高36px

---

有人能帮我吗？

加入一个三角形和一个div

.btn{ 宽度：100px； 高度：100px； 背景：红色； 浮动：左； } 里特先生{ 浮动：左； 宽度：0； 身高：0； 边框顶部：100px纯红； 右边框：100px实心透明； } 所容纳之物 使用CSS形状 三角{ 宽度：0； 身高：0； 边框顶部：60px实心213971； 右边框：60px实心透明； 浮动：左； } 直肠{ 宽度：300px； 高度：60px； 背景：213971； 浮动：左； } 正文{ 位置：绝对位置； 线高：60px； 左侧填充：20px； 字体大小：20px； 颜色：白色； 字体系列：无衬线； } 太棒了你可以试试这个代码

.丝带{ 字体大小：16px！重要； 宽度：150px； 光标：指针； 位置：相对位置； 背景：2000人； 颜色：fff； 文本对齐：居中； 填充：0.5em 0px；/*调整以适应*/ 边距：2em auto 3em；/*基于24px垂直节奏。48px底部边距-通常为24，但色带“图形”本身占用24px，因此我们将其加倍*/ } .ribbon:之后{ 左：100%； 边框：实心透明； 内容：； 身高：0； 宽度：0； 位置：绝对位置； 指针事件：无； } .ribbon:之后{ 边框颜色：rgba136、183、213、0； 左边框颜色：000； 边框宽度：0px 0px 36px 44px； 最高：1%； } 按钮

---

令人惊叹的谢谢你，这很有效@Sharath designer欢迎你。如果你认为这个答案适合你，请点击“勾号”接受答案。我会避免这样做，因为这会使三角形的“部分”变得不可辨认。只是一个建议@Akshay。更适合使用类而不是ID，因为后者应该是唯一的。@JamesP。谢谢，你说得对，我已经编辑了答案谢谢！很好用！谢谢你的回复你真的只需要一个div就可以了！