Menu
I'd like to create a shape like the one displayed below entirely in CSS. As you can tell, it would take a bit more tweaking than simply applying rounded corners...
Can it be done?
537
"Rounded Corners" is a finishing technique used to improve the aesthetics and/or functionality of certain printed pieces. For example, business cards and promotional brochures are often designed with rounded corners to achieve a unique look.
Rounded corners are more effective for maps and diagrams because they allow our eyes to easily follow lines “as it suits better to the natural movement of the head and eyes respectively” [5]. Sharp corners throw your eyes off the path of the line so you end up experiencing abrupt pauses when the line changes direction.
If there are contents within the div that has the curved corners, you have to set overflow: hidden because otherwise the child div's overflow can give the impression that the border-radius isn't working. This answer worked for me.
Here is the jsfiddle: http://jsfiddle.net/swqZL/
CSS for element div with class "figure":
.figure { height: 400px; width: 200px; background-color: black; border-bottom-left-radius: 100%30px; border-bottom-right-radius: 100%30px; } Horizontal radius 100%, vertical radius 30px
72
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
