I have several options for how to do this, I want to understand which will be right. For example, insert the background, along with the lower shadow. The second css option is to draw a semicircle and add a shadow. I am sure that many more options. How to do it right? plz tell me ...

Banner

  • What are the requirements for the banner? Adaptability, the ability to replace text, colors, pictures? If there are no such requirements, then I see no reason to be wise and do something harder than stupidly jpeg-picture - andreymal
  • the text is static, adaptability is needed ... and besides the picture, how can you still do not know? - max
  • Make a jpeg with a width: 100% white container and height: auto and don't bother. - Talleyran

1 answer 1

For example using border-radius.

body { margin:0; } .block { background:url(http://m.wsj.net/video/20140117/011714digitstechweek/011714digitstechweek_1280x720.jpg); background-size:cover; height:90vh; border-radius:0 0 100% 100%; box-shadow:0 0 10px black; } 
 <div class="block"></div>