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>

我不确定如何控制“列表样式图像”的大小（即缩放图像），这比使用多个图像更受欢迎。在这种情况下，我想说我希望20x20像素图像为10x10像素。

然而，我的理想是使用CSS中的polygon属性创建自定义项目符号样式，但不知道如何实现或者是否支持（因为多边形本身相对较新）。

以下是我的想法的一个例子。使用的多边形是六边形供参考。

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宽度/高度增加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替换列表子弹与多边形自定义项目符号（可扩展）

1 个答案: