是否有更好的方法使这个“角落色带/标签”保持比例/响应？

Question

我最近一直想制作这些很酷的丝带/标签，这些丝带/标签位于我的网站上的一个小定价计划表上。

Here是我想要的样子，简单。

我能够做到这一点：

html{
	font-size:16px;
	font-family:sans-serif;
}

body{
	height:100vh;
	display:flex;
	align-items:center;
	justify-content:center;
	
	margin:0;
	padding:0;
}

.box{
	position:relative;
	width:300px;
	height:400px;
	background-color:orange;
	
	overflow:hidden;
}

.label-referencepoint{
	position:absolute;
	right:0;
	background-color:black;
	
	transform:rotate(45deg);
}

.label{
	position:absolute;
	transform:translateX(-50%);
	padding:1em 3em 0 3em;
	background-color:deepskyblue;
}

<div class="box">
	<div class="label-referencepoint">
		<div class="label">New!</div>
	</div>
</div>

它运行良好，您可以从HTML类更改字体大小，使其保持比例和响应。

这是我背后的逻辑：

我的容器右上角有一个参考点，它的宽度和高度为0.它也旋转了45度。在它内部，我有一个实际的色带/标签，顶部填充为1em，侧面填充为3em，以伸展并填充其宽度。容器显然必须溢出：隐藏否则功能区的背景会突然出现。

无论如何，我想知道是否有更好的方法来做，也许不必使用参考点？