[英]CSS add shadow to angled div
我有以下代碼:
.angled{ background-color: red; height: 120px; width: 100%; -webkit-clip-path: polygon(0 0, 1600px 0, 1600px 53%, 0 100%); clip-path: polygon(0 0, 1600px 0, 1600px 53%, 0 100%); }
<div class="angled"></div>
我想在div的下邊緣添加一個插入陰影。 我怎樣才能做到這一點?
您可以將傾斜元素視為可以輕松應用嵌入陰影的背景:
.angeled { position:relative; height: 120px; overflow:hidden; z-index:0; } .angeled::before { content:""; position:absolute; z-index:-1; top:-20px; left:-20px; right:-20px; bottom:0; transform-origin:left; transform:skewY(-3deg); background:red; box-shadow:0 -2px 20px green inset }
<div class="angeled"></div>
您也可以使用漸變創建它:
.angeled { position:relative; height: 120px; background: linear-gradient(red,red) top/100% 50%, linear-gradient(to bottom right, red calc(50% - 15px),green calc(50% - 1px), transparent 50%) bottom left/150% 50%; background-repeat:no-repeat; }
<div class="angeled"></div>
您可以使用filter: drop-shadow
。 請參閱文檔: https : //developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow
.angeled{ background-color: red; height: 120px; width: 100%; -webkit-clip-path: polygon(0 0, 1600px 0, 1600px 53%, 0 100%); clip-path: polygon(0 0, 1600px 0, 1600px 53%, 0 100%); } .outer{ filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.5)); }
<div class="outer"> <div class="angeled"> </div> </div>
如果您不必使用多邊形:)
div.wrapper { overflow: hidden; height: 150px; } div.poly { width: 100%; height: 100px; background-color: #F00; box-shadow: 0px 5px 15px rgba(0,0,0,.6); transform: rotate(-2deg) scale(1.2); transform-origin: 30px 0px; }
<div class='wrapper'> <div class='poly'> </div> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.