Josh Balsillie Josh Balsillie - 6 months ago 12
CSS Question

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.

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>





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.

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>




Answer

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 can also increase the left padding of the parent <li> by 1. So that it 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>