Code

Custom Triangle List Bullet Shape

Customize the shape of Webflow's native list item for your Webflow site with this custom CSS solution. Want a different shape than Webflow's native circle list item shape? With this method you can easily update the list item shape.

How to add it

Add the custom CSS to your sites head custom code or global embed
Update your class name to triangle shape

The code

CSS

                      <!-- Add to head tag -->
<style>
.ul--triangle li::before {  
  content: " ";  
  width: 0; /* Dimensions of the triangle sets in the border properties */  
  height: 0;  
  border-top: 5px solid transparent; /* Set border top & bottom to change the height of the triangle */  
  border-bottom: 5px solid transparent;  
  border-left: 8px solid #12b0eb; /* Triangle width and color */  
  position: absolute; /* Positioning the bullet as absolute. It will relative to the li item */  
  left: 0; /* Stick the bullet to the left side */  
  top: 6px; /* Align the bullet with the first line of li text */
}
</style>