Is it possible to create custom shapes? I need to add a few custom shapes onto the hero image. I will post a pic of what the shapes look like so you have an idea of what I am trying to do. The 2 orange shapes I would like to figure out how to create. 
Here is my public share link: LINK
(how to access public share link)
complex shapes are generally made in programs like Photoshop. It is possible to make some types of shapes using CSS.
Here is an article on that.
But then where do I insert that CSS, and how would I get it to the correct location where it needs to be?
It would be very easy to create those shapes as transparent PNG’s in PSD and import them in.
You can insert custom code either globally in the site dashboard (all pages) or per page in the page’s settings.
You would only need to use custom code for shapes using css attributes not yet supported in the designer. Things like pseudo classes :before and :after.
Everything else you can use the designer interface.
In the example, they are using the elements ID to target it with the desired CSS. Webflow uses class names instead of IDs.
This targets an elements ID #parallelogram { In Webflow and CSS generally classes are commonly used for the same effect .parallelogram {
So you would design normally, giving elements class names in order to create your design. If you need more CSS that isn’t yet covered by the designer you would use the custom code area to add to the CSS by targeting the class name that you gave the element.
If you take the 6 point star example in the article. You would create a div and give it a class name “star-six”.
You would then re-create all of the settings given in the example under that name.
You will notice that the example also needs the pseudo class :after to work. This isn’t supported in the designer. You will need to use the custom code area.
Copy and past this code into the custom code area. All custom CSS goes between the same style tag.
<style> .star-six:after { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; position: absolute; content: ""; top: 30px; left: -50px; }</style>
Once you have published the page and view the site live the custom code will take affect.
Take a look
http://alexs-groovy-site-8b9c18.webflow.io/
Here is how it works.
https://preview.webflow.com/preview/alexs-groovy-site-8b9c18?preview=2ab9b7ddabe335d6654dd671f9a21b84
You will find the custom code at the bottom of the home page settings.
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.