我试图减少三角形的高度,用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;
}
这是我期待实现的目标:
答案 0 :(得分:1)
答案 1 :(得分:0)
更改margin-top
会降低高度,但也会缩小三角形。您还必须调整margin-left
,margin-right
,padding-left
和padding-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<强> 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/
希望这有帮助!!!