CSS用多边形自定义项目符号替换列表项目符号(可缩放) [英] CSS Replace List Bullet With Polygon Custom Bullet ( Scalable )
问题描述
我的最终目标是创建可以根据屏幕分辨率缩放的项目符号.
My end goal is to create a bullet that can be scaled depending on screen resolution.
我知道在CSS的某些方面，您可以在可以缩放的容器中导入大图像，也可以使用多个大小的图像并根据屏幕分辨率显示正确的图像.
I know in some aspects of CSS you can either import a large image inside a container that can be scaled, or use multiple sized images and display the correct one depending on screen resolution.
下面是一个使用图像的简单示例.
Below is a simple example of using an image.
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像素.
I'm unsure of how to control the size of the "list-style-image" ( i.e. scale the image ), which would be preferred over using multiple images. In this case lets say I wanted the 20x20 pixel image to be 10x10 pixels.
但是，我的理想做法是在CSS中使用多边形属性创建自定义项目符号样式，但不知道如何实现或是否受支持(因为多边形本身是相对较新的).
My ideal however would be to create a custom bullet style with the polygon attribute in CSS, but do not know how to implement or if it's supported ( as polygon is relatively new itself ).
下面是我在想的一个例子.所用的多边形是六角形，仅供参考.
Below is an example of what I was thinking. The polygon used is a hexagon for reference.
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，这样事情就会均匀缩放.
Instead of using list item images, you could use background images. If you increase the em width/height of the background image by 1, you should also increase the left padding of the parent <li> by 1, so that things will evenly scale.
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用多边形自定义项目符号替换列表项目符号(可缩放)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
