我的最终目标是创建一个可以根据屏幕分辨率缩放的项目符号。
我知道在 CSS 的某些方面，您可以在可缩放的容器内导入大图像，或者使用多种尺寸的图像并根据屏幕分辨率显示正确的图像。
下面是使用图像的简单示例。
li {
list-style-type: square; /* Default */
list-style-image: url("https://i.stack.imgur.com/gtv3o.jpg"); /* Custom */
}
<!doctype html>
<html>
<head>
</head>
<body>
<ul>
<li>This is a line item</li>
<li>This is a line item</li>
</ul>
</body>
</html>
我不确定如何控制“列表样式图像”的大小（即缩放图像），这比使用多个图像更好。在本例中，假设我希望 20x20 像素的图像变为 10x10 像素。
然而，我的理想是使用CSS中的多边形属性创建自定义项目符号样式，但不知道如何实现或是否支持它（因为多边形本身相对较新）。
下面是我的想法的一个例子。所使用的多边形是六边形以供参考。
li {
list-style-type: none;
}
li:before {
clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
-webkit-clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
background-color:rgba(255,0,0,1.00);
width: 10px;
height: 10px;
}
<!doctype html>
<html>
<head>
</head>
<body>
<ul>
<li>This is a line item</li>
<li>This is a line item</li>
</ul>
</body>
</html>
您可以使用背景图像，而不是使用列表项图像。如果您增加em背景图像的宽度/高度加1，您还应该增加父级的左侧填充<li>1，这样事情就会均匀地缩放。
ul {
padding: 0;
}
li {
list-style: none;
position: relative;
padding-left: 1.25em;
}
li:after {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
content: '';
background: transparent url(https://i.stack.imgur.com/gtv3o.jpg) 0 50% no-repeat;
width: 1em;
height: 1em;
display: inline-block;
background-size: cover;
}
<ul>
<li>This is a line item</li>
<li>This is a line item</li>
</ul>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
