1

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

我知道在 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 中使用多边形属性创建自定义项目符号样式，但不知道如何实现或是否支持它（因为多边形本身相对较新）。

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

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>

4

1 回答 1

0

您可以使用背景图像，而不是使用列表项图像。如果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>

于 2016-06-08T23:25:50.933 回答