五角星 base64

最新推荐文章于 2022-10-21 16:51:05 发布
岁月如歌_
最新推荐文章于 2022-10-21 16:51:05 发布
阅读量837
点赞数
本文链接：https://blog.csdn.net/namechenfl/article/details/88738799
版权
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
.star{
  font-size: 24px;
  color: #FFBF19;
}
.starGrey{
  display: inline-block;
  vertical-align: middle;
  width: 140px;
  height: 26px;
  margin-right: 12px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIwAAAAaCAYAAABl/7RgAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkQxQTc3NjM0NDk2NjExRTk5MDU3QkEwQUU2QzA0NTgzIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkQxQTc3NjM1NDk2NjExRTk5MDU3QkEwQUU2QzA0NTgzIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RDFBNzc2MzI0OTY2MTFFOTkwNTdCQTBBRTZDMDQ1ODMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RDFBNzc2MzM0OTY2MTFFOTkwNTdCQTBBRTZDMDQ1ODMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4DzPEHAAACk0lEQVR42uzYPYgTQRQH8My4J4fgR2WnEDa7Obhg5xcWgnf21hYnKiIqFlpZyNlYayEWIipaWNt7/R1nLbhfpBBikUatLDYb/09WiDG72Zlkw4y+gWEm2Xn728DL29ltNDRaFEVnqTcW1Ngzx3N0grIs28yna4v4geyZ40nVgDiOz2A4Rz2f19rYM8uTGtn5YNK8xn8DewZ5QvHedwrI9h8ZJ+Vpz/N2arrXsmeYJ3Wzc8L9sNZ/A3tmeJUrTJIkx9M03Z24c3acE67rfpjnj2PPTK9yhRkMBps6x3Qbe2Z6EytMt9tdRja6QggPJcvHVyvD4fBy6YmEeIXhE+6JIdZGyNqk2Wz+qHIR7NnjCWyEDmC8ikUeuk8IPh/BXMyS0TjPEMNnwjEP0SN8fpEfZs9Sz8EO+TuSZi8O3KCFGOdSAvMLPkod8zWA98jKd+vsWeqJkUeuOyhfj+rYnaPM3QX2eOwRjz0LPTGG3kI2PZm1nI2WNfTbwJ4WvBdgzzLvrxMHQXANi57N4x6Idr3dbj8vW8eeXZ4oQC8h4CUCpCaWIfYKsNdV1rNnj1eYhWEYXsTwBoF7FLEBhg3f99+qxLFnhyemoO8BriuCW8DO62Q2e+Z700rWisZ16sSwZ4lXWGGSJDmYpulXnat0HOeQ67rfVGLYs8OTJS9uOjO89OksIoa9xXuFCZNl2aouqBPLnh1e2R6mU7Ap2kXJWqdOc5XYKY09CzynalnCyT9KKe+3Wq13I1+fjOP4AjLyIdavzrOEsmemJ0ser34HdQFteJ53bAz71eg7OkZraO1YrMrjHHu2esi6w0EQfImi6CaybUkhq5cohmLpHOz9H16j3+/v7/V6+3Q3TRRL52Dv3/N+CjAAJeb2l1x2orsAAAAASUVORK5CYII=) no-repeat left center;
  background-size: 140px;
}
.starOrange{
  width: 0;
  height: 100%;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIwAAAAaCAYAAABl/7RgAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkY3NkJGMEY1NDk2NjExRTk5MzZDRUI2RDZCMzY5MkNGIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkY3NkJGMEY2NDk2NjExRTk5MzZDRUI2RDZCMzY5MkNGIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Rjc2QkYwRjM0OTY2MTFFOTkzNkNFQjZENkIzNjkyQ0YiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Rjc2QkYwRjQ0OTY2MTFFOTkzNkNFQjZENkIzNjkyQ0YiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4mJxxQAAACtklEQVR42uyaQWgTURCGZzaJVEG9Cd2kRayphQYvRa1UzIbWu2cPFRUpKh705EHSi2c9iAcRlfbQs3eFttJiqbkK0igKJendgwba7ji7LZjUzXbfa7bs03mwu5P33rxvA/+bmRcCoNHofa7oXbBPTXjJ4aW1iK5b3rZG9+UbCi8xPFRXpz0Cm7Tgf0jhBbxYX4x3NwgvSTxLXZ0wGWjHthuElySeUoSh2ewwUz7s0Nx5LNWWYtkNwkscTy3CoDsZ0FeObTcIL3G8yBGG5nrOAG0sB6+SPovO6seO7gbhJZKnEGE2y3pjuk14SeRhcK473gUZtw/WN/I8o5+7BoDoWvhK+Jrvn4FgBTLpKqxbX7H0vREttwrPFB7S0skj0Ph1gzF5ntzPgDzbPWzjngSNvALgKt+rbK+wXYWugy/9MeEZy0vj8JcfNG8fAJdubcmzU0nTe2HqZauX7VFOfg88lj8kPGN5+Kcoyt4Dch/HU51b99GpPWktwoRnIq8lbLFS73Cue7rncNYc1hDvYrH+LFDEwjOOh38fv7pv8uN5Z3IgTKCz9iL8uCc8k3jBp6T57FUOb6/YxdKEuRzGrmOxNhUpXQrPGB62h9pXuJCaZjOleuAHC8c5jM0o1VjCM4KH4eHNfss5cUxNnfgOnfolvV8jhZd03m4ha0DjPXV8hGcIr61gqHLiKKszpy5ryvm+qm7CM4LXPsL8bBS0da3jKzwjeFaI0ga1gTq+wjOCFyIYLLQ5ci1DyhrzL89W8Q19SeGZwAv7E/hOp09Me8gV9JumvnM0a19mwiO2B0N8ozThGcALOSVRYVuR3wCtcXAmTmOpBbY17PXxmD/Hm9vsq7YlhGcqjxb7jtFc9xqf429TZSgTvTIfyvg+ni+vIbz/gwe0cOowVexD2jUT+3prCO/f4/0WYACUlrFguT1eIwAAAABJRU5ErkJggg==) no-repeat left center;
  background-size: 140px;
}

    </style>
</head>
<body>
    <div class="star">
        <div class="starGrey">
          <div class="starOrange" style="width: 70%"></div>
        </div>
        70分
      </div>
</body>
</html>