Make an animation in which the element “cuts” around its text diagonal.
This sounds suspiciously like homework. For me to do it, it’d take javascript, and an empty div that’s been transformed to be diagnonal that gets overlaid on top…
1 Like
Hi there balu,
and a warm welcome to these forums. 
Here is one possible solution…
[code]
untitled document #container { width:50%; padding:2%; border:1px solid #999; margin:auto; } .basic{ float:left; clear:left; height:1px; border-right:1px solid #666; border-left:1px solid #666; background-color:#ccc; } #container p { margin:0; }Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh, posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat. Curabitur et volutpat nibh. Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta, sapien nec molestie molestie, odio magna vestibulum lorem, vitae feugiat est leo sit amet nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac magna sed, pretium commodo odio. Sed porttitor augue velit, quis placerat diam sodales ac. Curabitur vitae porta ex. Praesent rutrum ex fringilla tellus tincidunt interdum. Proin molestie lectus consectetur purus aliquam porttitor. Fusce ac nisi ac magna scelerisque finibus a vitae sem. Donec vehicula diam non leo efficitur, id euismod odio tincidunt. Vivamus auctor viverra purus vitae lobortis. Sed et libero non diam tempor sagittis. Quisque vel egestas ipsum. Integer sed elit eu orci blandit commodo in in erat. Donec blandit, mi at gravida varius, nulla tellus vulputate ex, vitae euismod erat lectus rutrum diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur tristique varius ullamcorper. Nam venenatis diam ante, et cursus elit porttitor at. Morbi mattis leo at ex vehicula, non vestibulum ligula aliquam. Maecenas non nibh sollicitudin, porttitor odio in, elementum arcu. Donec pulvinar orci enim. In pulvinar congue ante, ac rutrum odio bibendum volutpat. Phasellus ac sem consequat lorem congue malesuada vitae vitae diam. Donec eu imperdiet augue. Curabitur ullamcorper sit amet libero in ullamcorper. Donec sed laoreet quam. Phasellus malesuada libero felis, non elementum ex tincidunt eget. Quisque cursus arcu vel diam consectetur, ac imperdiet est cursus. Fusce id nunc nibh. In sapien massa, feugiat ut magna eu, hendrerit porttitor justo. In vitae massa ipsum. Aliquam feugiat tortor sed diam facilisis, et molestie dolor blandit. Pellentesque non lectus odio. Curabitur pulvinar orci vitae lorem bibendum volutpat. Duis congue dignissim ante ut consequat. Sed nec sagittis neque, quis vehicula urna. Fusce laoreet interdum ligula vel finibus. Nunc odio purus, dapibus sit amet orci eget, congue eleifend erat. Quisque porttitor imperdiet ullamcorper. Aenean non orci nec magna tempor porta at id ipsum.
Cras euismod euismod nibh, nec hendrerit ante efficitur id. Donec sit amet interdum mauris.
Maecenas pellentesque, sem a commodo tincidunt, quam ex viverra nibh, non consectetur
odio quam et velit. Nulla eu risus quis magna suscipit malesuada vel quis nisi. Cras suscipit
nulla vitae ante rhoncus, id elementum nisi interdum. Integer sem quam, tincidunt nec quam
ac, lobortis volutpat ipsum. Curabitur nec turpis viverra, eleifend arcu non, egestas felis.
Etiam a eros felis. Aliquam nec ullamcorper enim. Donec sit amet commodo ante, vitae
consectetur sem. Proin ut luctus dolor. Integer lectus massa, maximus nec urna non,
ullamcorper hendrerit mi.
coothead
- Make a wedge shaped white and transparent image with your orange button on it.
- Make it the background image of a div over the top of your text.
- Move the div diagonally over your text to hide the text beneath.
I don’t believe that O.P. wants to hide the text. 
Instead, as in my example, it should be pushed to the side. 
coothead
2 Likes
Hi there balu,
here is a modified version that just displays a rectangular orange box. 
[code]
untitled document #container { position:relative; width:50%; padding:2%; border:1px solid #999; margin:auto; } #box { position:absolute; display:none; width:1px; height:1px; margin:1px; background-color:#c60; transform:translate(0,0)rotate(45deg); } .basic{ float:left; clear:left; height:1px; } #container p { margin:0; }Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh, posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat. Curabitur et volutpat nibh. Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta, sapien nec molestie molestie, odio magna vestibulum lorem, vitae feugiat est leo sit amet nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac magna sed, pretium commodo odio. Sed porttitor augue velit, quis placerat diam sodales ac. Curabitur vitae porta ex. Praesent rutrum ex fringilla tellus tincidunt interdum. Proin molestie lectus consectetur purus aliquam porttitor. Fusce ac nisi ac magna scelerisque finibus a vitae sem. Donec vehicula diam non leo efficitur, id euismod odio tincidunt. Vivamus auctor viverra purus vitae lobortis. Sed et libero non diam tempor sagittis. Quisque vel egestas ipsum. Integer sed elit eu orci blandit commodo in in erat. Donec blandit, mi at gravida varius, nulla tellus vulputate ex, vitae euismod erat lectus rutrum diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur tristique varius ullamcorper. Nam venenatis diam ante, et cursus elit porttitor at. Morbi mattis leo at ex vehicula, non vestibulum ligula aliquam. Maecenas non nibh sollicitudin, porttitor odio in, elementum arcu. Donec pulvinar orci enim. In pulvinar congue ante, ac rutrum odio bibendum volutpat. Phasellus ac sem consequat lorem congue malesuada vitae vitae diam. Donec eu imperdiet augue. Curabitur ullamcorper sit amet libero in ullamcorper. Donec sed laoreet quam. Phasellus malesuada libero felis, non elementum ex tincidunt eget. Quisque cursus arcu vel diam consectetur, ac imperdiet est cursus. Fusce id nunc nibh. In sapien massa, feugiat ut magna eu, hendrerit porttitor justo. In vitae massa ipsum. Aliquam feugiat tortor sed diam facilisis, et molestie dolor blandit. Pellentesque non lectus odio. Curabitur pulvinar orci vitae lorem bibendum volutpat. Duis congue dignissim ante ut consequat. Sed nec sagittis neque, quis vehicula urna. Fusce laoreet interdum ligula vel finibus. Nunc odio purus, dapibus sit amet orci eget, congue eleifend erat. Quisque porttitor imperdiet ullamcorper. Aenean non orci nec magna tempor porta at id ipsum.
Cras euismod euismod nibh, nec hendrerit ante efficitur id. Donec sit amet interdum mauris.
Maecenas pellentesque, sem a commodo tincidunt, quam ex viverra nibh, non consectetur
odio quam et velit. Nulla eu risus quis magna suscipit malesuada vel quis nisi. Cras suscipit
nulla vitae ante rhoncus, id elementum nisi interdum. Integer sem quam, tincidunt nec quam
ac, lobortis volutpat ipsum. Curabitur nec turpis viverra, eleifend arcu non, egestas felis.
Etiam a eros felis. Aliquam nec ullamcorper enim. Donec sit amet commodo ante, vitae
consectetur sem. Proin ut luctus dolor. Integer lectus massa, maximus nec urna non,
ullamcorper hendrerit mi.
coothead
1 Like
Excellent! Coothead your second option just what i need. But can do it without javascript?
I did animation by rectangle and has stopped for text animation.
If I could have done it with CSS, then I would have.
This does not necessarily mean that it could not be
done with CSS, but only that I am not aware, as yet,
of any method. 
I would suggest that you pose this question to your
local CSS guru for the definitive answer. 
coothead
1 Like
I would also recommend that you state up front as a requirement that the task should be done with CSS and not JavaScript so no one’s time is wasted.
2 Likes
Proof of concept 
Animation could be tidied up and I’m sure there is an easier way but haven’t had time to have a proper think as I have 2 grandchildren jumping on my keyboard and my mouse is in pieces on the floor 
4 Likes
it seems that the O.P. now has no need to contact his local guru,
as our very own resident master has stepped up to the mark.
coothead
2 Likes
Oh, really - what kind of feeble excuse is that? 
2 Likes
Ok, here’s a better (simpler) version for Chrome 46 only. 
Uses the magic of css shapes and no extra mark up at all (see full page version on codepen for best effect).
4 Likes
Don’t forget that it will also work in Opera 33.0.
The animated box appears to be slightly off line
on it’s descent and ends up slightly over the text.
Would a corrected angle of descent cure that?
coothead
works fine in Vivaldi beta as well.
1 Like
Messing with the top, left offsets and the height should get it closer. I’ve tweaked the above codepen but there probabaly is an optimum setting I’ve missed.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.