是这种形状可能与css3

Question

我想用纯 css 制作或尽可能接近
灰色区域不是必需的，我对黑色更感兴趣。 我知道如何制作这样的三角形
但我不知道从那里做什么。这甚至可能吗？

Answer 1

我认为我们可以查看此链接，它会帮助您http://www.css3shapes.com/

Answer 2

我知道你要求一个“纯粹的”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/

Answer 3

使用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形状。