Home/ Questions/Q 7669279
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T15:33:31+00:00

Ideally I’d like to do this using CSS3, but would settle for SVG. I

  • 0

Here's what I'm trying to make

Ideally I’d like to do this using CSS3, but would settle for SVG. I can make something quasy like this in CSS JSFiddle …but border-radius didn’t seem up to flaring out the curved lines like the image shows.

Basically I have a header div and am hoping to create this darker curved region at the top of it.

I’d greatly appreciate any help from any clever CSS gurus. Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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

    enter image description here

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

    using border radius you can define different lengths for the x and y axis. So I used

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

    That gives it a length of 40 on the x axis and 20 on the y. Its not quite as sharp as your picture above but its pretty close. more info

    • 0