※ 引述《taiwan08 (save the one for all)》之銘言:
: 各位前輩大家好
: 這是我目前練習的頁面
: http://shining-show.com/demo/
: 目前為了讓圖片有斜角的效果,我用了兩個圖層疊上去
: 再加上
: border-bottom: 300px solid white;
: border-right: 3000px solid transparent;
: 就成為目前我練習的樣式呈現
: 可是如果我想再加上shadow效果,如下圖(右邊的shadow是不管怎麼用都是錯的>"<)
: 想呈現左邊的示意圖,我該怎麼處理會比較好呢?
: http://i.imgur.com/aoF5JUu.jpg
: 先謝謝各位前輩的指教
: 附上jsfiddle:
: https://jsfiddle.net/r6ad4mpz/
基本上..我會建議你直接用編圖軟體
用border去畫三角形, 那是一個trick
原理去google一下就有
你要做的陰影感覺是在border上面
沒那種屬性可以設定
比較可能的解法是
再貼第三層上去做box-shadow效果
background-color:transparent
只是你要對位置..而且你又做rwd
另外一個是svg畫三角形, 用filter去做shadow效果