search

tailwindlabs / discuss

A place to ask questions, get help, or share what you've built with Tailwind CSS.
MIT License
171 stars 9 forks source link

Circle - part of it colored #465

Open Kobrowsky opened 4 years ago

Kobrowsky commented 4 years ago

How would you go about this? The circle is an image with class rounded-full applied. But I have no idea how to go about the green part. image

This is how far I got: https://codesandbox.io/s/still-shadow-1psct?fontsize=14&hidenavigation=1&theme=dark

tlgreg commented 4 years ago

If an actual img is not necessary the image could be a background to a rounded-full overflow-hidden element that hosts the green element inside it. If an image element is actually needed (ie. for accessibility reasons) then that element could have the img inside it and the green element can be absolutely positioned above. Example: https://codepen.io/tlgreg/pen/MWwJWGz