添加一個三角彎到一個陰影分格

所以，我有這個網站，我正在重新開發一個客戶端，它是10年前。目前他們的整個頁腳橫幅是一個圖像。我試圖保留頁腳，使其看起來完全像圖片，而不必依賴於使用整個內容的圖像，這對我來說似乎是多餘的，因爲這可以通過HTML和CSS完成。所以我試圖確切的風格，但似乎無法形成這種輕微的三角形彎曲效果。我想添加一個陰影效果到我的頁腳的頂部邊框只有一個輕微的三角形彎曲效果在這樣的網站的徽標頂部是這樣的：添加一個三角彎到一個陰影分格

我可以直接添加投影陰影沒有問題，但我不確定如何在圖像中添加輕微的三角形效果。我正在使用bootstrap來提高響應速度，所以在他們的文檔中查找是否有任何助手類來幫助我實現這一目標。我不是最大的CSS專家，所以我不知道如何實現這種效果。有沒有使用純CSS的方法？如果需要，javascript或jquery也可以工作。

這是我的標記和樣式的基本佈局（3列）：

<div class="row drop-shadow"> 
    <div class="col-lg-4"> 
    //content not added yet 
    </div> 
    <div class="col-lg-4"> 
    //content not added yet 
    </div> 
    <div class="col-lg-4"> 
    //content not added yet 
    </div> 

</div> 


.drop-shadow{box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2)}

來源

2016-06-07 surgiie

你忘了添加你正在使用的相關HTML和CSS。請閱讀「* [MCVE] *」準則，瞭解爲什麼我們需要看到這一點。 –

編輯過的文章包含它，謝謝！ – surgiie

希望我有時間做更多的評論，但SVG是爲這種事情做出的。 ;） –

這裏只是一個快速的可能性，但this code創建了一個簡單的三角形。您可以使用它將絕對三角形定位到元素w/box-shadow。這是我能想到的最快的解決方案。

我編輯了答案，因爲您已添加CSS &HTML。

來源

2016-06-07 20:11:27 Beepye

我能夠通過修改代碼來左右像素數量的一點點，並將三角形的顏色改爲白色，從而實現我所需要的。謝謝！ – surgiie

不用擔心brotato芯片！我剛剛爲你更新。 – Beepye

-2

創建一個矩形，歪斜和旋轉然後將其放置得當，以獲得所需的效果。

來源

2016-06-07 19:57:24 Himanshu

捏這樣的陰影是不是你可以用CSS做的事情。使它看起來像這樣的唯一方法是使用圖像作爲原始網站。您可以將其裁剪爲陰影並根據需要編碼頁腳的其餘部分。

來源

2016-06-07 20:17:01

添加一個三角彎到一個陰影分格

回答

相關問題