是這種形狀可能與CSS3

Question

我想用純CSS 生產這種或儘可能接近

不nessicarily所需的灰色地帶，我更感興趣的是黑色的。 我知道如何製作這樣的三角形

但我不知道從那裏做什麼。這甚至有可能嗎？

Answer 1

我認爲這是可能讓我們檢查這個環節，它會幫助你http://www.css3shapes.com/

Answer 2

生產任意形狀與CSS確實是可能的，而你在問題中所繪製的形狀應該是可能的。 @ pundit的答案已經指向一個網站http://www.css3shapes.com/，它最能展示CSS3可以做什麼的可能性。

但是，請理解這些是黑客。使用CSS創建任意形狀非常聰明，但實際上並非CSS所打算的。我會協助你避免在創建真正的網站時太「聰明」。你需要在你的HTML中創建額外的標記來支持它，這相當於擊敗了CSS的重點。

重要的是，您還應該注意，css3shapes網站上的大量形狀無法在某些瀏覽器中正確顯示。很明顯，IE8和更早版本會與其中很多人爭鬥，但即使是Firefox 3.6等瀏覽器也無法正確顯示其中的一些。

很明顯，它們在所有最新的瀏覽器中都能正常工作......但所有最新的瀏覽器都支持Canvas和SVG等技術，它們更適合在瀏覽器上渲染這種形狀的繪圖比CSS黑客。

好的，所以IE8不支持Canvas或SVG，但至少有一些老版本IE的工具可以模擬Canvas和SVG。我當然不想嘗試讓它適用於所有這些CSS形狀。

Answer 3

我知道你問一個「純粹」的CSS形狀，但這裏是我可以幫助，它使用一個小的HTML部分，如CSS3半徑不這樣做的負面半徑又

下面是HTML

<div class=" frame1 "> 
    <div class=" box "></div> 
    <div class=" frame2 "> 
     <div class=" bottoml "></div> 
     <div class=" bottomr "></div> 
    </div> 
</div> 

這裏是CSS

.frame1 
{ 
width:300px; 
height:150px; 
background-color:#444; 
} 

.box 
{ 
width:300px; 
height:75px; 
background-color:#ccc; 
} 

.frame2 
{ 
width:300px; 
height:75px; 
} 

.bottoml 
{ 
float:left; 
width:145px; 
height:75px; 
background-color:#fff; 
border-top-right-radius:120px 80px; 
} 

.bottomr 
{ 
float:right; 
width:145px; 
height:75px; 
background-color:#fff; 
border-top-left-radius:120px 80px; 
} 

和提琴 http://jsfiddle.net/WDgYz/