Is it possible to create custom borders around list items with a unique border on the left side of each item?
For example, see this image:
I have tried using CSS 3 angles but I can't seem to achieve an inner circle or hole effect with borders. It appears to be more complicated and time-consuming than using images.
Currently, I am exploring the option of using background images. I have disabled the left border and am attempting to position a graphic along the left edge of each item, however, I haven't had any success yet. The items vary in length and are floated left within a horizontal slider, adding complexity to the situation.
In addition, I need different hover and active styles as indicated in the image.
Finally, I would like to include a round styled circle or ellipse that can display a number indicating the quantity of items in the category, positioned at the upper right corner of the styled list item box.
This is where I currently stand with my progress:
HTML:
<div class="filters">
<div class="filters-inner">
<ul id="filters-slider" class="filters-list">
<li><a href="#">Darling</a></li>
... (additional list items here)
</ul>
</div>
</div>
CSS:
.filters {
background-color: #fff;
padding-top: 3px;
... (CSS rules continue)
}
.div.sample {
padding-top: 200px;
}
If anyone has insight on how to achieve this design effectively, please share your knowledge!