使用CSS3降低Triangle的高度

Question

我试图减少三角形的高度，用css填充div＆＃34;框＆＃34;

这里是小提琴http://jsfiddle.net/6rp7F/

.triangle-down{
width: 50%;
height: 0;
padding-left: 50%;
padding-top: 50%;
overflow: hidden; }


.triangle-down div {
width: 0; 
height: -600px;
margin-left:-500px;
margin-top:-500px;     
border-left: 500px solid transparent;
border-right: 500px solid transparent;
border-top: 500px solid #039dd4;

}

这是我期待实现的目标：

Answer 1

将border-top设置为200px可能会对您有所帮助。如果不是实际值，则至少要查看要调整的参数。

更新了小提琴（进行了更改）：

http://jsfiddle.net/6rp7F/6/

Answer 2

更改margin-top会降低高度，但也会缩小三角形。您还必须调整margin-left，margin-right，padding-left和padding-right以保持其宽度相同。

Here是一个更新的小提琴

Answer 3

.triangle-down{
width: 50%;
height: 0;
padding-left: 50%;
padding-top: 50%;
overflow: hidden; }


.triangle-down div {
width: 0; 
height: -600px;
margin-left:-500px;
margin-top:-500px;     
border-left: 1200px solid transparent;
border-right: 1200px solid transparent;
border-top: 500px solid #039dd4;

这会离屏但是有效！

如果你愿意减小整体尺寸，那么你可以在那个小屏幕上看到它，但概念保持不变

看到here完美运作！ （为了证明它有效，我把所有东西减少了10倍）

Answer 4

当使用伪元素

完成此操作时，不确定为什么需要额外的div

JSfiddle Demo

<强> HTML

<div class="triangle-down"></div>

<强> CSS

.triangle-down{
    height:1px;
    position: relative;
}
.triangle-down:after {
    position: absolute;
    content:"";
    width:0;
    height:0;    
    /* separate out so you can see various properties*/
    /* the height of the arrow is dtermined by the top and bottom border widths */
    border-width: 200px 500px 200px 500px;
    border-style:solid;
    border-color:red transparent transparent transparent;
}

Answer 5

您可以修改应用于div的CSS：

.triangle-down div {
    width: 0px;
    margin-left: -300px;
    margin-top: -350px;
    border-left: 250px solid transparent;
    border-right: 250px solid transparent;
    border-top: 125px solid #039DD4;
}

您可以看到：http://jsfiddle.net/zs6sY/

希望这有帮助!!!