如何用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; 
}