使用CSS3降低Triangle的高度

时间:2014-06-03 19:03:56

标签: html css css3

我试图减少三角形的高度,用css填充div"框"

这里是小提琴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;

}

这是我期待实现的目标:

enter image description here

5 个答案:

答案 0 :(得分:1)

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

更新了小提琴(进行了更改):

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

答案 1 :(得分:0)

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

Here是一个更新的小提琴

答案 2 :(得分:0)

.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倍)

答案 3 :(得分:0)

当使用伪元素

完成此操作时,不确定为什么需要额外的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;
}

答案 4 :(得分:0)

您可以修改应用于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/

希望这有帮助!!!