All geek questions in one place

How can you create this bloated look using CSS or, if necessary, SVG?

Here's what I'm trying to make

Ideally, I would like to do this with CSS3, but agree to SVG. I can do something like this in CSS JSFiddle ... but the border radius doesn't seem to inflate the curved lines as shown.

Basically, I have a div div and I hope to create this darker curved area at the top.

I would really appreciate any help from any smart CSS guru. Thanks!

+6
source share
1 answer

I got it pretty close using the jsFiddle you started and changed the border radius a bit.

enter image description here

http://jsfiddle.net/CoryMathews/Q9Mrt/

using the radius of the border, you can define different lengths for the x and y axis. Therefore i used

border-bottom-right-radius:40px 20px; border-bottom-left-radius:40px 20px;

This gives it a length of 40 on the x axis and 20 on y. It's not as sharp as your photo above, but pretty close. more details

+2
source

Source: https://habr.com/ru/post/910771/

More articles:


All Articles