CSS 将列表项目符号替换为多边形自定义项目符号（可缩放）

Question

我的最终目标是创建一个可以根据屏幕分辨率缩放的项目符号。

我知道 CSS 的某些方面，您可以在可缩放的容器中导入大图像，或者使用多种尺寸的图像并根据屏幕分辨率显示正确的图像。

下面是使用图像的简单示例。

li {
 list-style-type: square; /* Default */
 list-style-image: url("http://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>

我不确定如何控制 "list-style-image" 的大小（即缩放图像），这比使用多张图像更可取。在这种情况下，假设我希望 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>

Answer 1

您可以使用背景图片来代替列表项图片。如果你将背景图片的 em width/height 增加 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(http://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>

CSS 将列表项目符号替换为多边形自定义项目符号（可缩放）

CSS Replace List Bullet With Polygon Custom Bullet ( Scalable )

css

polygon

bulletedlist