How to display the element over clipped space using Clip path
I have been trying to make a leaderboard like style where there is an triangle with different layers each represent position like top 15%,I want to show top 15% right next to it when the position is top 15, but as the space next to the parent is clipped, I m not sure how to display the element in over clipped space, PFB the code pen for it
https://codepen.io/naveen570/pen/yLEebJo
any suggestions would be helpful.
12 Replies
think this clip-path will do it
Let me tryy and tell you
Hi @MarkBoots it need to very next to traiangle
if i decrease the left value, its getting hidden and if i were to adjust clip path values , hidden clippaths are displaying unnecessarily
m trying to get something like this
but its not coming properly
hmm. that is more difficult. Have to think about it
Think you might be better of with a svg.
like create every triangle with svg?
can you tell your idea, i will try
im not the best with svg's to be honest
but i would say, 1 svg wilth all data in it. You can use it as inline html, and style the fills with css
Oh let me give a try
even m not good at svg
Thanks for the response 🙂
maybe i have some time later (can not promiss)
sure no prob
is only the TOP 15 having text next to the pyramid?
Ohw, and i dont understand this. Do you mean the height of a bar has to change with the value?
so a way to do this would be using an
:after as a background stand in and clipping that :after instead of the content. The "background colors" are done as gradients: https://codepen.io/jsnkuhn/pen/NWzxLeP?editors=0100