如何用CSS3制作三角形？

Question

如何将此底部div变成图像中所示的三角形？我尝试了下面的代码，但边缘不在中心。想法？

border-radius: 0 0px 100px 100px; 

感谢

Answer 1

width: 0px; 
height: 0px; 
border-style: solid; 
border-width: 100px 100px 0 100px; 
border-color: #007bff transparent transparent transparent; 

Answer 2

试试这个：

HTML

<div class="triangle"> 
    <!--Div content here --> 
</div> 

CSS

.triangle { 
    width: 0px; 
    height: 0px; 
    border-style: solid; 
    border-width: 60px 175px 0 175px; 
    border-color: #007bff transparent transparent transparent; 
} 

见DEMO这里：

倒三角形 http://jsfiddle.net/EdZ32/6/

三角UP http://jsfiddle.net/EdZ32/5/

三角发电机在这里： http://html-generator.weebly.com/css-triangle-generator.html

Answer 3

使用下面的CSS来实现三角形样式。

.arrow-down { 
width: 0; 
height: 0; 
border-left: 20px solid transparent; 
border-right: 20px solid transparent; 

border-top: 20px solid #f00; 
}