How to make a semicircle?

Design help General
1

Hey everyone,

on this website https://events.foxtrail.ch/de/ I have seen the round button at the top (“Gutschein schenken”).

So i was wondering: How do i create a semicircle in webflow?
Border radius 50% makes it an eclipse, but how do I set the full button as a semicircle?

Thanks in advance,

Marcel

2

Your example is a full circle peeking from the top. To be honest half circle button will look incredibly bad anywhere but when kinda appearing from something, and that is achievable by just hiding half of your circle behind that something.

As for how to do a half-circle for any other use: just create a div, make it square, make its overflow hidden, insert another div inside, make it fit 100% width and height, make it a circle with radius, then make it absolutely positioned and move it 50% any side you wish the half-circle to subsequently face.

2 Likes
3

Big thanks that helped me a lot!