效果如图↑
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>body {background: #eeeff2;}/*左上角标签，父元素必须设置position: relative;overflow: hidden;height: 大于150;width: 大于150px;，同时，角标标签内加入属性superscript-title="左上角标签文字内容"*/.subscript:after {position: absolute;top: 15px;left: -45px;width: 150px;height: 30px;content: attr(superscript-title);text-align: center;font-size: 14px;color: white;line-height: 30px;font-family: 'Microsoft YaHei', 'PingFangSC-Regular', 'sans-serif', 'San Francisco', 'Microsoft Sans Serif', 'Arial'; /*背景旋转角度渐变*/background: -webkit-linear-gradient(90deg, orange 0%, orangered 100%); /* Safari 5.1 - 6.0 */background: -o-linear-gradient(90deg, orange 0%, orangered 100%); /* Opera 11.1 - 12.0 */background: -moz-linear-gradient(90deg, orange 0%, orangered 100%); /* Firefox 3.6 - 15 */background: linear-gradient(90deg, orange 0%, orangered 100%); /* 标准的语法（必须放在最后） *//*旋转角标*/-moz-transform: rotate(-45deg);-webkit-transform: rotate(-45deg);-o-transform: rotate(-45deg);-ms-transform: rotate(-45deg);transform: rotate(-45deg);}/*时下流行的风格--【新拟态】________________________*/.subscript {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);}/*渐变文字样式________________________*/.subscript 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 class="subscript" superscript-title="标签内容"><p>Aa</p>
</div>
</body>
</html>
