demo!DOCTYPE html html head style /*角标签父元素必须设置position: relative;overflow: hidden;height: 大于120;width: 大于120px;同时角标标签内加入属性superscriptTitle左上角标签文字内容*/ [superscriptTitle]:after { content: attr(superscriptTitle); width: 110px; height: 30px; font-size: 14px; color: white; display: flex; justify-content: center; align-items: center; background: linear-gradient(to right, orange, orangered); position: absolute; top: 0; /* 左上角角标 */ /*left: 0; transform: rotate(-0.125turn) translate(-29px, -10px); */ /* 右上角角标 */ right: 0; transform: rotate(0.125turn) translate(29px, -10px); } [superscriptTitle] { position: relative; overflow: hidden; /* 以下代码可以不要---------------------------------------- */ display: flex; justify-content: center; align-items: center; width: 200px; height: 200px; border-radius: 20px; background-color: #409EFF; color: white; } /style /head body div superscriptTitle角标内容盒子/div /body /html【新拟态】左上角标签样式、ICON图标样式、模仿AppStore的应用图标_软件左上角书签样式-CSDN博客文章浏览阅读5.5k次。这篇博客介绍了如何使用CSS3和HTML来创建新拟态风格的左上角标签样式以及模仿AppStore应用图标的技巧。通过结合CSS的边框和阴影效果实现了这种现代感十足的界面设计元素。https://blog.csdn.net/qq_37860634/article/details/107034976新样式左上角角标标签NEW、最新CSS代码-CSDN博客【代码】新样式左上角角标标签NEW、最新CSS代码。https://blog.csdn.net/qq_37860634/article/details/147396585