Div najeżdżający na inny div

Question

Witam.
Mam diva o szerokości 100% oraz wysokości powiedzmy 180px na samej górze strony. Pod nim ma być div o szerokości 1000px i wysokości 500px stanowiący główny content strony. Chcę aby ten o szerokości 1000px najeżdżał tak powiedzmy na oko ze 30px na ten górny a po bokach u góry miał taką smugę z cienia pokazującą jakoby lewy początek i prawy koniec tego contentu. Ta smuga ma wyglądać tak:
https://zapodaj.net/393a8663b91c7.png.html

Pomoże mi ktoś coś takiego stworzyć? Głowie się nad tym i nie mam pojęcia jak tego dokonać.

Answer 1

Nie daje ci gotowego rozwiązania, ale odwzorowanie załączonej przez ciebie grafiki, więc przeanalizuj sobie kod, zapewne są jeszcze inne rozwiązania, ale mi do głowy przyszedł ten pomysł.

 

CSS

.content
{
  position: relative;
  margin: auto;
  height: 110px;
  width: 80%;
  background: #fff;
}

.content:before, .content:after
{
    position: absolute;
    content: '';
    width: 5px;
    height: 100px;
    box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.2);
    background: rgba(0, 0, 0, 0.1);
    z-index: -1;
}

.content:before
{
  left: 0;
  transform:rotate(-3deg);
}

.content:after
{ 
  right: 0;
  transform:rotate(3deg);
}

HTML

<div class='content'></div>

 

Answer 2

https://jsfiddle.net/5jkotgrd/1/

O coś takiego Ci chodziło?