是这种形状可能与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/