▼
Streaming live at 10am (PST)

Non-rectangles buttons


#1

Hello,
How can I create buttons that are not rectangles?

Also, what is the best way to position elements that need a precise location, as shown in this awesome website? -

Thank you :slightly_smiling_face:


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

So, long story short, everything is a box or is contained in a box. You’ll have to learn how to transform the box to get the shapes you want. This site you showed above, uses transform: rotate and transform: skewY nested inside another shape that have border-radius: 50% and overflow: hidden to make this segmented donut shape (a pretty cleaver use case, I should say).

Alternatively you can use SVGs or Html Canvas, but they are way harder to learn and you have to do a lot of custom code to make them work with Webflow.


#3

Great, thanks a lot!
I guess SVGs are more flexible because you can get any shape you want, not just rectangle based shapes.
I tried to find references relating to embedding SVGs to webflow. If you know any, that would be great.
Thanks again