先上效果图：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.ant-ribbon {
box-sizing: border-box;
margin: 0;
padding: 0 8px;
color: #1677ff;
font-size: 14px;
line-height: 22px;
list-style: none;
position: absolute;
top: 8px;
white-space: nowrap;
background-color: #1677ff;
border-radius: 4px;
border-end-end-radius: 0;
}
.ant-ribbon-text {
color: #ffffff;
}
.ant-ribbon-placement-end {
inset-inline-end: 8px;
border-end-end-radius: 0;
}
.ant-ribbon-corner {
position: absolute;
top: 100%;
width: 8px;
height: 8px;
color: currentcolor;
border: 4px solid;
transform: scaleY(0.75);
transform-origin: top;
filter: brightness(75%);
box-sizing: border-box;
inset-inline-end: 0;
border-inline-end-color: transparent;
border-block-end-color: transparent;
}
</style>
<body>
<div class="ant-ribbon ant-ribbon-placement-end">
<span class="ant-ribbon-text">5.17.0</span>
<div class="ant-ribbon-corner">
</div>
</div>
</body>
</html>