Html 如何制作对角线div？

我有一个定价表，其中包含一个对角线徽章，如下图所示。定价表响应迅速，徽章也响应迅速。然而，当我缩小定价表时，徽章的右侧从父级

div

（参见下图）上“分离”。我跟着，我不知道我错过了什么

。高级卡类别{
背景：蓝色；
边界半径：100%；
边框：4倍纯白；
宽度：85px；
高度：85px；
文本对齐：居中；
位置：绝对位置；
保证金：自动；
前-9%；
右：0；
左：0；
}
.高级卡标头{
高度：128px；
边界半径：4px4px0px 0px；
宽度：100%；
保证金：0自动；
}
.青蛙背景梯度{
背景：红色；
背景尺寸：54%自动，封面；
背景位置：115%23%；
}
.盒子{
位置：相对位置；
最大宽度：600px；
宽度：90%；
背景：#fff；
盒影：0.15px rgba（0,0,0,1）；
}
.丝带{
宽度：150px；
高度：150像素；
溢出：隐藏；
位置：绝对位置；
}
.带状跨度{
位置：绝对位置；
显示：块；
宽度：268px；
填充：4px0；
背景色：白色；
颜色：#495057；
字号：0.8em；
文本对齐：居中；
字体大小：400；
}
.右上角{
排名：0；
右：-31px；
}
.右上跨{
左：-25px；
顶部：30px；
变换：旋转（45度）；
}

雷蒙达多

您将.box宽度设置为90%的任何特定原因？我在代码笔中将.box width更改为100%，看起来还可以。

请编辑您的问题，以包含相关代码（如果可能，请使用编辑器中的

[]

按钮，在代码段中）。到CodePen等的外部链接是可以接受的，但除了问题本身有代码外，外部链接可能会随着时间的推移而改变、中断等，这会使问题无效，对其他用户没有帮助。@Johannes为什么要重新打开一个完美的副本？@Paula嗯，无论如何，就对角线div而言，您试图复制的代码笔没有响应。CodePen演示的唯一“响应性”是整个元素都在屏幕中央。如果我把我的

.box

设置为

width:100%

它会比它的父项更宽。把

.box{width:90%；}

更改为

。box{width:100%；}

没有任何区别。@TylerH你用Paula的代码笔测试过吗？您正在使用哪个浏览器？@BlueP任何浏览器都不会对

width

属性的百分比值有任何问题。我打开她的代码片段，看了看。在CodePen中，它确实会产生差异，但会产生过度校正的差异；它将45度的div扩展到边缘之外，而不是将其推到主盒div的边缘。@TylerH我相信OP已经更新了代码笔，因为我发布了答案。并且可以通过将.ribbon右上角设置为0px而不是-31px来进行更正。严格地说，OP的问题并不是你在评论中所说的css世界中的“响应”，而是从问题的描述中，我们知道OP想要实现什么，并且它确实与我的答案相符