CSS響應橫幅與斜影

Question

我正在嘗試使用css為橫幅創建背景，其中一側有顏色，另一側有另一個有45°切割的橫幅，如下所示

我已經能夠重新創建上面的圖像，除了沒有留在正確位置的投影。 任何建議將不勝感激。

這是我的代碼：

 #container { height: 100px; width: 400px; overflow: hidden; background-color: #2962ff; } #triangle-topleft { width: 0; height: 0; border-top: 100px solid #2196f3; border-right: 400px solid transparent; -webkit-box-shadow: 5px 5px 20px 0px rgba(0,0,0,0.75); -moz-box-shadow: 5px 5px 20px 0px rgba(0,0,0,0.75); box-shadow: 5px 5px 20px 0px rgba(0,0,0,0.75); } 

 <div id="container"> <div id="triangle-topleft"></div> </div> 

Answer 1

帶邊框的CSS三角形技巧不能用於此，因為陰影仍將應用於框，而不僅僅應用於三角形。

你將不得不創建一個偽元素，旋轉它然后應用陰影。

 #container { position: relative; height: 200px; width: 200px; overflow: hidden; background-color: grey; } #container:before { content: ''; position: absolute; left: 20%; width: 100%; height: 200%; background-color: rgb(255, 255, 255); /* fallback */ background-color: rgba(255, 255, 255, 0.5); top: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); box-shadow: inset 0 0 20px 10px #333; } 

 <div id="container"></div> 

基本上，您創建一個大於父級的矩形，然后旋轉它並應用陰影。 您可以根據需要調整顏色和旋轉度

演示： http ： //jsfiddle.net/b5TnZ/2032/

Answer 2

您可以嘗試以下漸變：

 #container { height: 150px; background: linear-gradient(135deg,#2962ff 49.8%,rgba(0,0,0,0.75) 50%, #2196f3 calc(50% + 10px)); background-color:#2196f3; } 

 <div id="container"> </div> 

如果您想要對角線結果，只需將deg替換to bottom right ：

 #container { height: 150px; width:50%; background: linear-gradient(to bottom right,#2962ff 50%,rgba(0,0,0,0.75) 50%, #2196f3 calc(50% + 10px)); background-color:#2196f3; } 

 <div id="container"> </div> 

Answer 3

您可以在“線性漸變”中添加多個色標。 使用兩種顏色。

使用Shapy生成的漸變

 .canvas { display: flex; height: 100vh; align-items: center; justify-content: center; min-height: 100%; min-width: 100%; } .gradient-canvas { max-height: 100%; max-width: 100%; width: 100%; height: 100%; background: linear-gradient(127deg, rgb(31, 163, 209) 0%, rgb(31, 163, 209) 50%, rgb(25, 64, 208) 0%, rgb(46, 101, 223) 52%) 50% 50% / 100% 100% no-repeat; } 

 <div class="canvas"><div class="gradient-canvas"></div></div>