Html 如何创建一个倾斜45度且有单独边界的正方形

如何使用css实现这样一个正方形？我不知道如何创建这样的边框，以及如何完美地将文本居中

---

我希望你能像这样做

CSS:

.parent{
宽度：150px；
高度：150像素；
位置：相对位置；
顶部：40px；
左：50px；
变换：旋转（45度）；
}
.家长：以前{
内容：“；
宽度：106px；
高度：106px；
背景：rgb（20,20134）；
位置：绝对位置；
转换：翻译（-50%，-50%）；
最高：50%；
左：50%；
}
.橙色{
宽度：100%；
高度：20px；
背景：橙色；
位置：绝对位置；
}
橙色：以前，
.橙色：：之后{
内容：“；
位置：绝对位置；
宽度：20px；
高度：50px；
背景：橙色；
}
.橙色：：之后{
右：0；
高度：95px；
}
.橙色：最后一种{
底部：0；
变换：比例（-1）；
}
.日期{
位置：绝对位置；
最高：50%；
左：50%；
变换：平移（-50%，-50%）旋转（-45度）；
颜色：#FFF；
线高：0；
}

也许
2018年

到目前为止，您尝试了什么？请显示您当前的代码和失败的尝试采样方块->旋转方块->反向旋转其内容请学习。这里唯一棘手的部分是边框…它不是边框。谢谢您的帮助。但是您如何使其响应？我一直在玩的高度和宽度，但我不能得到它的工作，你可以使用变换：规模（0.8）；为了它。根据设备宽度，您可以使用@media查询来调整scale（）值。谢谢，我会尝试的