Form Technique - Post ID 291561

User 2906089 Photo


Registered User
222 posts

Please see the attached image. Is the little triangle pointing to the word Login done with css or an image. Is this technique possible in form designer or SD?
Attachments:
Learn something, Share something.
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

See what you find here: https://css-tricks.com/the-shapes-of-css/
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 187934 Photo


Senior Advisor
20,181 posts

Give this a try.
Attachments:
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 379556 Photo


Registered User
1,533 posts

Bosco wrote:
Is this technique possible in form designer or SD?

I don't have FD, but the attached method in SD may be of interest.

Frank
Attachments:
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

Eric, you seem to have managed to style the three sides of the triangle independently. How did you manage that? I've tried the same, but I had no luck with it.

Frank, your solution is brilliant! I've seen the same thing earlier, with half circles apparently hanging down from someting and the other half hidden behind the 'something'.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2906089 Photo


Registered User
222 posts

Hi Inger, Eric's solution is really cool. I'll refer you to this site, https://css-tricks.com/snippets/css/css-triangle/ . There is an animation near the end of the page that makes the trick easy to see.

To me it's hard to want to use this method since it really is a trick. I took me a while to understand it. I would have to use comments to work it out. A new guy might really be confused if he's not familiar with it.

Hello Frank, I like your because it easy to understand the rotation of a box with a div on top. It's almost self describing code.

Thank you all.
Learn something, Share something.
User 187934 Photo


Senior Advisor
20,181 posts

Inger wrote:
Eric, you seem to have managed to style the three sides of the triangle independently. How did you manage that? I've tried the same, but I had no luck with it..

Select the left and right side of the border and set their properties.
Now unselect them and select the bottom and set its properties.
No tricks just treats.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

I wouldn't have thought of that....
Brilliant! Thanks!
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com



Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.