效果如图↑!doctype html html langen head style body { background: #eeeff2; } /*左上角标签父元素必须设置position: relative;overflow: hidden;height: 大于150;width: 大于150px;同时角标标签内加入属性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; font-family: Arial; margin: 100px; border-radius: 40px; width: 200px; height: 200px; box-shadow: 0 20px 55px rgba(0, 0, 0, 0.1), -10px -10px 15px rgba(255, 255, 255, 0.9); background: linear-gradient(-180deg, #eee, #f9f9f9); } /*渐变文字样式________________________*/ [superscriptTitle] p { margin: 0; padding: 0; line-height: 200px; font-size: 100px; text-align: center; color: #238aea; /*渐变文字仅谷歌内核浏览器支持*/ background: -webkit-linear-gradient(0deg, #1858f1, #32c0e3); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /style /head body div superscriptTitle标签内容 pAa/p /div /body /html新样式左上角角标标签NEW、最新CSS代码-CSDN博客【代码】新样式左上角角标标签NEW、最新CSS代码。https://blog.csdn.net/qq_37860634/article/details/147396585左上角角标NEW、最新CSS代码_css左上角标签-CSDN博客文章浏览阅读864次。该文章介绍了如何使用CSS实现一个左上角的角标效果通过设置父元素的相对定位和子元素的绝对定位结合旋转和线性渐变背景创建了一个具有‘NEW’内容的橙色到红色渐变角标。示例代码中还展示了如何调整尺寸、颜色和样式。https://blog.csdn.net/qq_37860634/article/details/130272554