如何用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/

三角 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;
}