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

249

07 ноября 2021, 20:50

Как добиться эффекта который вы можете посмотреть ниже. У 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; 
}

<div class="page"> 
   
  <div class="sidebar"></div> 
  <div class="content"></div> 
   
</div>

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

Answer 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; 
}