仅使用html和css创建有角度的元素

如何仅使用html和css创建带有背景色的offer div

我要问的是报价div的宽度和高度应该与图片中的相同。 我用html和CSS创建了这个。然而，我的解决方案中隐藏了部分div，因为offer div具有更大的宽度和高度

我写的代码：

。提供文本包装{
显示：内联块；
位置：绝对位置；
顶部：-39px；
左-36px；
颜色：#FFF；
高度：72px；
宽度：75px；
背景#f44336；
变换：旋转（-43度）；
}
.提供文本{
-moz变换：旋转（-40度）；
-o变换：旋转（-40度）；
显示：内联块；
左边距：21px；
线高：124px；
}

提供

看看代码片段，它基本上只是改变尺寸和位置，直到你满意为止

这就是你的意思吗

。提供容器{/*添加容器以更好地显示效果*/
宽度：200px；
高度：100px；
溢出：隐藏；
位置：相对位置；
边框：1px实心#ccc；
边界半径：12px；
利润率：40像素；
}
.提供文本包装{
显示：内联块；
位置：绝对位置；
顶部：-29px；
左：-40px；
颜色：#FFF；
高度：72px；
宽度：95px；
背景#f44336；
变换：旋转（-45度）；
文本对齐：居中；
}
.提供文本{
显示：内联块；
线高：114px；
}

提供

您的代码似乎工作正常，您能澄清它的错误吗？它工作正常。但我想要的是提供文本包装的宽度和高度和图片中的相同。在我的解决方案中，要约文本包装的大部分是隐藏的。请看编辑。