Кривой блок с необычной тенью

#css #box_shadow

Как добиться эффекта который вы можете посмотреть ниже.
У body фон другой, а у sidebar-a другой к тому же он имеет изогнутый вид и тень.
Я пока что создал просто разметки с фоном но эффект с тенью и изгибом не смог сделать.

 



.page {
	 display: flex;
	 justify-content: center;
	 width: 1024px;
	 height: 100vh;
	 background: url("https://i.ibb.co/9V7gBZC/image.jpg") no-repeat;
	 background-size: cover;
}
 .page .sidebar {
	 width: 262px;
	 height: 100%;
	 background: url("https://i.ibb.co/CzscSMX/main-page-bg.jpg");
}
 .page .content {
	 width: 762px;
	 height: 100%;
}
 body {
	 padding: 0;
	 margin: 0;
}

  
  

  

  





Также есть текущий исходник на jsfiddle
    

Ответы

Ответ 1

Вот на css, но не без недостатков =)



body {
  margin: 0;
  background: radial-gradient(circle at 250px 50%, 
    #fff,  #ddd 50%, #ddd );
}

.side {
  width:200px;
  height:100vh;
  --r: 2800px;
  background: radial-gradient(circle at calc(var(--r) + 195px) 50%, 
    #0000 var(--r),  #ddd calc(var(--r) + 2px), #ddd );
  position: relative;
}

.side:before, .side:after{
  z-index: -1;
  position: absolute;
  content: "";
  height: 50%;
  top:0;
  right: 7px;
  width: 20px;
  --shadow: 5px 0 10px #aaa;
  box-shadow: var(--shadow);
  --rot: 3deg;
  transform: rotate(calc(var(--rot)));
}

.side:after {
  --rot: -3deg;
  bottom: 0;
  top: auto;
}