My ultimate objective is to design a bullet that can adjust its size based on the screen resolution.
In certain cases of CSS, you have the option to either include a large image within a container that can be resized or utilize multiple images of different sizes and display the appropriate one depending on the screen resolution.
Here's a straightforward example using an image:
li {
list-style-type: square; /* Default */
list-style-image: url("https://i.sstatic.net/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>I am uncertain about how to manage the size of the "list-style-image" (e.g. scaling the image), which I prefer over using multiple images. For instance, if I wanted a 20x20 pixel image to be displayed as 10x10 pixels.
Ideally, I would like to create a custom bullet style using the polygon attribute in CSS, but I'm unsure how to implement it or whether it's supported (given that the polygon attribute is relatively new).
Below is an example of what I had in mind, using a hexagon as the polygon 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>