如何將此佈局轉換爲html/css？

我的合作伙伴設計機構給我發佈了一個要轉換成html/css的佈局。您可以在這裏看到一些佈局，頂部的導航欄是唯一需要的。如何將此佈局轉換爲html/css？

enter image description here

我的問題，現在實際上是，我不知道，如何實現HTML/CSS該佈局，如綠色導航欄「彎曲」是不是在頁面中間。佈局應該靈活，所以我甚至不想使用包含彎曲和居中的一個大圖像（2500x75像素）。如果有兩個元素，一個從左側開始標識，另一個從右側開始，則會更好。

你會如何意識到這一點？

來源

2012-07-31 chris.ribal

你堅持什麼？沒有試圖不屑一顧，這似乎並不困難;所以我不確定我是否可能在某處丟失了一個細節。 – 2012-07-31 22:22:43

您可以重複背景，例如較粗和較細的線條，只切割導航的凹凸部分。 – 2012-07-31 22:23:23

模糊的圖像困擾着我的眼睛=/ – 2012-07-31 22:31:29

你可以做一些事情旋轉<div>，也許是這樣的：

<div class="full"></div> 
<div class="half"> 
    <div class="corner"></div> 
</div>

.full{ 
    height: 40px; 
    background: lightgreen; 
} 
.half{ 
    width: 50%; 
    height: 30px; 
    position: absolute; 
    top: 40px; 
    left: 0; 
    background: lightgreen; 
} 
.corner{ 
    width: 50px; 
    height: 50px; 
    -webkit-transform: rotate(40deg); 
    -webkit-transform-origin: 100% 100%; 
    position: absolute; 
    right: 0px; 
    top: -20px; 
    background: lightgreen; 
}

現場演示：jsFiddle

改進演示使用CSS歪斜：jsFiddle

來源

2012-07-31 22:38:09

andcourse，告別較舊的瀏覽器:)更好的解決辦法是把一些png放在角落裏。 – 2012-07-31 22:40:45

@MiljanPuzović：只要功能和可用性不受影響，就可以爲現代瀏覽器保留增強功能並讓舊版本的用戶體驗降級。 – 2012-07-31 22:42:15

讓我們做一個完整的IE6支持JPG） – 2012-07-31 22:42:46

如何將此佈局轉換爲html/css？

回答

相關問題