Rotate a div sideways

Design help General
1

How could I rotate a div to be sideways to achieve this type of hero section.

I want to be able to hover over and click on one of these, but I would also like it to have a layover color.

I know i’ve seen this before but I can’t think of an example.

Example image attached. - What is your guys suggestions.

918×297 448 KB

Here is my public share link: Webflow - WTR Services
(how to access public share link)

2

@sabanna @PixelGeek - Any ideas on this?

3

I used this resource to generate css clips and then added them in embed code widget
http://bennettfeely.com/clippy/

4 Likes
4

Great - thank you. How do you get the entire code though? I don’t see where it references the image URL in the code below?

Or do you just add the widget and set the Background image the image that you want?

I am having problems embeding the code.

5

It is CSS settings for the object/element. What I did is created form that I needed, copied path (css code below the image) and then added it to the webflow page.
Example:

`<style>
   .image-class-name {

   -webkit-clip-path: polygon(100% 0, 75% 100%, 0 100%, 0 0);
   clip-path: polygon(100% 0, 75% 100%, 0 100%, 0 0);
}
</style>`
1 Like
6

Oh ok, Did you add the code in an embed widget or did you just place it in the custom code section?

7

In the design process, I am adding it to the embed code widget. It allowed me to see the result right in the designer mode. Then when project is done, move it to the head part of custom code area. It will keep your code cleaner.

1 Like
8

Hi @sabanna I am just not getting it, sorry. How can I for example insert a hexagon from Clippy using the embed code function? A little how to for beginners would be super appreciated. Just tried everything I could think of, but webflow is just writing down that code as text, right onto the page.

Many thanks in advance - Denis

9

OMG it just worked out! This actually is super cool!!! :heart_eyes: So, no need for a tutorial anymore. But thanks anyway @sabanna for being such a wonderful source of inspiration :kissing_heart:

10

oh man! THATS COOL!!! thanks for the link.

2 Likes
11

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.