我可以用CSS獲得這些彎曲的角落嗎？

Question

我需要創建這種佈局，我想盡可能多地使用CSS，而不是使用圖像等等。

因此，我如何在CSS中做到這一點？ （如果有的話？）

正如你所看到的，背後是圖像，按鈕上覆蓋着填充。我正在努力的那一點是在IMAGE的上方和左邊以及按鈕的右下方創建曲線（我已經在下面的圖片中指出了它們）。

任何幫助將是偉大的。

感謝

Answer 1

你根本不必拆分圖像，只有容器div。

讓我詳細介紹一下： 您可以將圖像設置爲背景圖像，而不是將其置於img標籤的src屬性中。使用CSS精靈時，這種技術是最常用的。所以，如果你有最高的div在一個固定的寬度和高度，如果你嘗試在其中應用背景圖像，你會發現它非常適合。

在底部，您有兩個div或您喜歡的任何塊元素，只要確保將固定的寬度和高度，所以背景將應用和您將能夠實際看到它。

然後，所有你需要做的就是擺弄CSS背景位置來調整圖像的SE塊。

我會放一個小的演示，可以更好地說明這個思想。 之後，你有在頂部有一個大格，並在底部，其中兩個人共享相同的背景圖片兩個較小，但具有不同背景的位置，你可以放心地加入一些CSS3邊框半徑，以適應您的圓度的需求。您還可以使用一些工具（如http://css3generator.com/）輕鬆地在所有瀏覽器上添加兼容性層。

Answer 2

這是背景圖片，這是一個CSS元件的功能，如果這就是你的意思，但它不是選擇一個單獨的屬性，至少不是標準CSS。等到CSS3變得更加優先，然後是角落半徑或其他某種東西。

嗯，它可能是3個單獨的div，一個「燒」成背景圖像的洞，或者一個div覆蓋按鈕。

弄清楚它是如何完成的最好方法是讀取您找到它的頁面的來源。

爲方便起見： 如果您有一個基於webkit的瀏覽器，如chrome或safari，然後在按鈕「右鍵單擊」上啓用開發者模式鼠標並選擇檢查元素。否則，你可以倒過頁面源，直到找到你想要的東西。

Answer 3

用純CSS很容易實現。您顯示的頁面被分成3個div，沒有任何餘量。您只需要爲每個div設置正確的邊框半徑。

Answer 4

我知道足夠多的CSS是危險的，所以我無法詳細介紹每一步，但我認爲你可以接近這樣的：

在斯普利特的z-index的背景圖像分成兩個獨立的圖像都0在灰盒頂部的高度。我認爲你可以使用兩個div，它們引用具有不同偏移量的相同原始圖像（類似於CSS Sprites），但我不知道如何做到這一點的細節。較低的div的左邊緣將在灰色框結束的位置開始。繞過每個「圖像」的左下角div。

使用適當的四捨五入法添加z-index爲1的灰色框，然後使用適當的四捨五入將z-index爲2的藍色框再次添加。

包含所有這些元素的塊元素的背景也必須是灰色的，以匹配灰色邊框並在最右邊的箭頭指向的位置正確填充灰色。