I need to create a div element which its background is composed of two colors split with a half circle:
I want to use gradients because it will be more convenient for animation purposes. I don’t want to use pseudo-elements or border-radius and its declinations. Also, I’m limited with my HTML structure; my div element must contain only text, no tags.
I know that gradients is the key for lots of things like that but fail to create what I want.
If anyone can help me on that, I would be very happy. Thanks a lot and have a nice day.
3
Answers
You can do it like below:
A combination of linear and radial gradients does nicely.
You can also build it with basic CSS properties:
Result picture